ホームページ > 記事 > ウェブフロントエンド > JS のいくつかの配列トラバーサル メソッドの概要と比較
今回は、いくつかの JS 配列トラバーサル メソッドの概要と比較について説明します。notes とは何ですか? いくつかの 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回実行(1回100回、計10回ループし、得られた分析結果)した結果です。 ) この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がJS のいくつかの配列トラバーサル メソッドの概要と比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。