むしろ直訳よりも、紙の読みやすさを確保するために。
この記事では、簡単に配列に事業を拡大するために作品の話をする前に、展開操作のパフォーマンスを改善する方法について説明します。
オペレータ又は三点を展開し、アレイまたはアレイは、一般的に反復することができる受け入れ[... arrayOrIterable]、アレイ要素が部分的に分解し、これらの構造に新しいアレイを使用して、爆発。
アレイ内の任意の場所に配置することができる演算子を展開します。
番号=のconst [1,2 ,. 3。]; [0、...数値]; // => [0 ,. 1,2 ,. 3] [0、...数値,. 4]; // => 0 、1,2 ,. 3 ,. 4]。 [...数字,. 4]; // => [1,2 ,. 3 ,. 4]はコードをコピー
今、興味深い質問は、パフォーマンスを向上させることができますか？私たちは見て見てみましょうは、配列内の作業者の位置を拡大するかどうか、そこにあります。
頭部と尾部の機能に取り付けられた1
性能比較を開始する前に、二つの機能を定義します。
最初appendToTail()の関数：：
関数appendToTail（項目、配列）{
[...アレイ、項目]を返します。
}
CONST番号= [1、2、3]。
appendToTail（10、番号）; // => [1、2、3、10]复制代码
appendToTail()機能主な機能はれるitemアレイの端部に挿入されます。
第二の機能appendToHead()：
関数appendToHead（項目、配列）{
戻り[アイテム、...アレイ]。
}
CONST番号= [1、2、3]。
appendToHead（10、番号）; // => 10、1、2、3]复制代码
appendToHead()それは純粋で、新しい配列を返す関数である[item，... array]ショーの操作item渡された配列の後ろに。
一見すると、これらの機能のパフォーマンスは異なるものになると信じる理由はない、しかし、外観を見てクマよりも良い事実を主張しています。
2.パフォーマンステスト
これら三つのMacBook Proのノートパソコンのランニングのブラウザ[... array，item]と[item，... array]対応するパフォーマンスかどうかを確認するには：
クローム76
Firefoxの68
サファリ12.1
テスト結果：
以下のように、上で見たFirefoxとSafariブラウザ[... array，item]と[item，... array]基本的に同じ性能。
しかし、クロム、中[... array，item]よりも実行速度[item，... array]倍の速度。この結果は、私たちのために非常に有用です。
するにはChromeちょうどああへの配列の先頭に事業を拡大するため、演算子を展開し、パフォーマンスを向上させます。
CONST結果= [...アレイ、項目];重複コード
しかし、これは、なぜこれがなぜ起こるのか？
3.ファストパスの最適化（高速パスの最適化）
：V8バージョン7.2（ChromeのJSを実行するためのサポート）を起動し、新しい拡張事業者のために最適化することができ、高速パスの最適化。
次のように簡単に言えば、それは動作します：
エンジンが展開オペレータに遭遇したとき、この最適化がなければ、[...iterable, item]それは呼び出したiterableオブジェクトのイテレータ（iterator.next()）メソッドを。各反復において、メモリのアレイが増加する戻り、反復の結果は、それに付加されます。
しかし、既知の反復可能を最適化するための高速経路は、（整数の配列として）検出され、完全にスキップiteratorオブジェクトの作成。エンジンは、結果は唯一1つのメモリアレイが割り当てられ、アレイの延長された長さを読み取ります。その結果アレイに各要素を追加し、配列インデックスを展開渡します。
ファストパスの最適化の反復は、このようにパフォーマンスが向上し、一度だけ割り当てられたメモリの結果として、オブジェクトの作成をスキップします。
4.サポート・データ構造
ファストパスの最適化基準JSは、次のようなデータ構造に適用されます。
アレイ
番号=のconst [1,2 ,. 3 ,. 4。]; [数字...、5。]; [1、2 ,. 3 ,. 4 ,. 5] // =>コードをコピー
弦
メッセージ=定数'こんにちは'; [...メッセージ、 '！']; // => [ 'H'、 'I'は、 '！']コードをコピー
セット
CONST色=新しいセット（[、 '青' '白']）。 [...色、 'グリーン']; // => [、 '青'、 '白' 'グリーン'] [... colors.values（）、 'グリーン']。// => [、 '青'、 '白' 'グリーン'] [... colors.keys（）、 'グリーン']。// => '青'、 '白'、 'グリーン']复制代码
地図
mapのみのサポートmap.keys()とmap.values()方法
constの名前=新しい地図（[[5 '5']、[7 '7']]）。 [... names.values（） '10']; // => [ '5'、 '7'、 '10'] [... names.keys（）、10]。// => [5、7、10]复制代码
概要
あなたは配列の先頭にテキストの配列を展開すると、次のことができ、高速パスの最適化パフォーマンスの向上を。V7.2で利用可能なV8エンジン（中クロームV72とV12 NodeJSで利用可能）この最適化。
することで高速パスの最適化、[... array，item]少なくともよりも実行速度[item，... array]倍の速度。
エンドユーザーは、おそらくもちろん、違いを感じることはありませんので、我々は大きな配列で扱う場合、Fファストパスの最適化は確かに便利ですが、ほとんどの場合には、最適化するために強制することはできませんのでご注意ください、それはいくつかの最適化プログラムであってもよいです。
コードが展開された後BUGがリアルタイムで知ることができない存在し、その後これらのバグを解決するためにも、我々は監視ツールを使用してBUGは、簡単な方法をお勧めするためにここに皆のため、時間のデバッグログを費やしFundebugを。