JS の配列走査方法の概要とパフォーマンスの比較

今回は、JSを使用した配列トラバーサルメソッドの概要とパフォーマンス比較についてお届けします。JSを使用した配列トラバーサルメソッドの概要とパフォーマンス比較の注意点は何ですか?実際のケースを見てみましょう。

はじめに

この記事は、いくつかの JS 変数交換メソッドとパフォーマンス分析の比較に関する前の記事と同じシリーズに属しており、引き続き JS で一般的に使用されるいくつかの配列トラバーサル メソッドとそれぞれのパフォーマンスの比較を分析します。

Start by

JS 配列トラバーサル、基本的には、for、forin、foreach、forof、マップなどのメソッド。ここでは、この記事の分析とパフォーマンス分析と比較で使用されるいくつかの配列トラバーサルメソッドを示します最初のメソッド: 通常の for ループ

for(j = 0; j < arr.length; j++) {
}

2 番目のタイプ: for ループの最適化されたバージョン

for(j = 0,len=arr.length; j < len; j++) {
}

3番目のタイプ: forループの弱体化バージョン

for(j = 0; arr[j]!=null; j++) {
}

arr.forEach(function(e){
});

コードは次のとおりです。

Array.prototype.forEach.call(arr,function(el){
});

実際のパフォーマンスは通常の foreach よりも劣ります

6 番目のタイプ: forin ループ

for(j in arr) {
}

7 番目のメソッド: マップトラバーサル

arr.map(function(n){
});

8 番目のタイプ: forof traversal (ES6 のサポートが必要)

for(let value of arr) {
});

普通の for ループだけが最もエレガントです

(PS: 上記のコードはすべて単なる空のループであり、内部実行コードのリサイクルはなく、それぞれの時間の分析のみです)ループ)

分析結果 1

forin ループが最も遅いことがわかります。最適化された通常の for ループが最速です

分析結果2

以下のスクリーンショットデータは、Chrome（es6対応）で1000回実行して得られた結論です（各実行100回、合計10サイクル、得られた分析結果）

でさらに、次のデモの分析ツールを使用して、JS 配列トラバーサル手法を分析および比較することができます

この記事の事例を読んだ後は、この手法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！

推奨読書:

画像をドラッグして貼り付けるための vue-simplemde

props と state 属性の反応の実際的なケースの説明

以上がJS の配列走査方法の概要とパフォーマンスの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。