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

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

はじめに

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

Start by

前回、いくつかの一般的な JS 変数交換メソッドとそれぞれのパフォーマンスを分析した結果、このメソッドは非常に優れていると感じたので、コアロジックを抽出してテンプレートにカプセル化し、拡張することを計画しましたこの記事はシリーズの 2 番目であり、JS 配列トラバーサルのいくつかのメソッドの分析と比較です

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++) {
}

簡単な説明: このメソッドは、実際には厳密にはfor ループは長さの判定を使用せず、変数自体を使用して判定します。実際、このメソッドのパフォーマンスは通常の for ループよりもはるかに小さくなります。コードは次のとおりです。

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

簡単な説明: 配列に付属する foreach ループは、通常の for ループよりも頻繁に使用されます

5 番目のタイプ: foreach のバリアント

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

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

簡単な説明: foreach は配列型であるため、この型以外の一部 (NodeList など) では、直接使用できないため、このバリアントを作成することで、同様の配列に foreach 関数を持たせることができます。

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

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

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

for(j in arr) {
}

簡単な説明: 多くの人がこのループを使用することを好みますが、実際には、分析とテストの結果、多くのループトラバーサルの中で メソッドの中でその効率は最も低いです

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

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

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

簡単な説明: このメソッドも広く使用されていますが、よりエレガントです。使用すると、実際の効率は foreach ほど良くありません

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

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

for(let value of arr) {
});

簡単な説明: このメソッドは es6 で使用されます。 forin よりは優れていますが、それでもないよりは優れています。 通常の for ループでのさまざまなトラバースメソッドのパフォーマンス比較

基本的に、上記のメソッドを 1 つずつ比較分析しました。描画されるのは次のとおりです:

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

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

パフォーマンス比較のスクリーンショット

分析結果 1

以下のスクリーンショットのデータは、Chrome (es6 をサポート) で 100 回実行した後に得られた結論です (毎回 10 回実行、合計10 サイクルの解析結果が得られます)

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

分析結果2

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

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

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

推奨読書:

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

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

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