JS配列ループ方式と効率分析の比較

JS配列ループ方式と効率分析の比較

配列メソッド

JavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列メソッドを示しています。この記事では、主に配列トラバーサル メソッドとそれぞれのパフォーマンスについて説明します。メソッドが多数あるため、パフォーマンスが最も優れたメソッドを選択する方法は、開発に非常に役立ちます。

配列の走査方法

のために

  • 標準のforループ文は最も伝統的なループ文でもある
var arr = [1,2,3,4,5]
for(var i=0;i<arr.length;i++){
  コンソールログ(arr[i])
}

最も単純なトラバーサル方法は、最も頻繁に使用され、パフォーマンスも良好ですが、最適化することができます。

  • 最適化されたループ文
var arr = [1,2,3,4,5]
for(var i=0,len=arr.length;i<len;i++){
  コンソールログ(arr[i])
}

配列の長さを繰り返し取得することを避けるために、一時変数を使用して長さをキャッシュします。特に配列の長さが大きい場合、最適化の効果はより顕著になります。

この方法は基本的に、すべてのループトラバーサル方法の中で最もパフォーマンスが優れています。

  • 通常の forEach

配列内の各要素に対して指定された関数を実行します。戻り値はなく、要素を走査するためによく使用されます。

var arr5 = [10,20,30]
var result5 = arr5.forEach((item,index,arr)=>{
    コンソール.log(アイテム)
})
コンソール.log(結果5)
/*
10
20
30
undefined このメソッドには戻り値がありません*/

配列に付属する foreach ループは頻繁に使用されますが、そのパフォーマンスは実際には通常の for ループよりも劣ります。

  • プロトタイプ forEach

foreach は配列型の組み込み関数であるため、一部の非配列型 (NodeList など) では直接使用できないため、このバリアントが作成されます。このバリアントを使用すると、同様の配列に foreach 関数を与えることができます。

定数ノード = document.querySelectorAll('div')
Array.prototype.forEach.call(nodes,(item,index,arr)=>{
  コンソール.log(アイテム)
})

実際のパフォーマンスは通常のforeachよりも弱い

...のために

継承された列挙可能なプロパティを含む、Symbol 以外のオブジェクトの列挙可能なプロパティを任意の順序で反復処理します。

これは通常、非整数型の名前を含むオブジェクトをトラバースするために使用され、プロトタイプ チェーン上の継承されたプロパティもトラバースできます。 Array や Object などの組み込みコンストラクターを使用して作成されたオブジェクトは、Object.prototype および String.prototype の列挙不可能なプロパティを継承し、走査することはできません。

var arr = [1,2,3,4,5]
for(変数 i 内の arr){
  コンソールログ(i,arr[i])
} //ここでiはオブジェクト属性、つまり配列の添え字です/**
0 1
1 2
23
3 4
4 5 **/

多くの人がこの方法を好むが、そのパフォーマンスはあまり良くない。

for...of (オブジェクトを走査できません)

反復可能なオブジェクト (反復子インターフェイス付き) (配列、マップ、セット、文字列、引数) に反復ループを作成し、カスタム反復フックを呼び出して、異なる属性値ごとにステートメントを実行します。オブジェクトを走査しないでください。

let arr=["フロントエンド","南玖","ssss"];
    for (let 項目の arr){
        コンソール.log(アイテム)
    }
//フロントエンドNanjiu ssss

//オブジェクトをトラバースします let person={name:"南玖",age:18,city:"上海"}
for (let の人項目){
  コンソール.log(アイテム)
}
// 不可能であることがわかりました。Object.keys で使用できます for(let item of Object.keys(person)){
    console.log(人[アイテム])
}
// 南九18上海

このメソッドは es6 で使用されており、パフォーマンスは forin よりも優れていますが、通常の for ループほど優れていません。

地図

map: は中断することなく配列を走査することしかできず、戻り値は変更された配列になります。

arr = [1,2,3]とします。
定数 res = arr.map(item=>{
  返品商品+1
})
コンソール.log(res) //[2,3,4]
console.log(arr) // [1,2,3]

配列内の各項目に対して指定された関数を実行します。関数がすべての項目に対して true を返す場合、関数は true を返します。

var arr = [10,30,25,64,18,3,9]
var result = arr.every((item,index,arr)=>{
      返品商品>3
})
console.log(結果) //false

いくつかの

配列内の各項目に対して指定された関数を実行します。関数内の項目の 1 つが true を返す場合は、true を返します。すべての項目が false を返す場合は、false を返します。

var arr2 = [10,20,32,45,36,94,75]
var result2 = arr2.some((item,index,arr)=>{
    返品商品<10
})
console.log(結果2) //false

減らす

Reduce() メソッドは、配列内の各要素に対して指定されたリデューサー関数を(昇順で)実行し、結果を 1 つの戻り値にまとめます。

定数配列 = [1,2,3,4]
const リデューサー = (アキュムレータ、現在の値) => アキュムレータ + 現在の値;

// 1 + 2 + 3 + 4
console.log(array1.reduce(リデューサー));

フィルター

配列内の各項目に対して指定された関数を実行すると、関数を満たす項目の配列が返されます。

// フィルターは要件を満たす配列項目で構成される新しい配列を返します var arr3 = [3,6,7,12,20,64,35]
var result3 = arr3.filter((item,index,arr)=>{
    返品商品 > 3
})
コンソール.log(結果3) //[6,7,12,20,64,35]

パフォーマンステストツールのテスト

ツールテストを使用したパフォーマンス分析の結果は、以下の図に示されています。

手動テスト

コードを自分でテストすることもできます:

//テスト関数 function clecTime(fn,fnName){
        定数開始 = 新しい日付().getTime()
        if(fn) fn()
        定数終了 = 新しい Date().getTime()
        console.log(`${fnName} 実行時間: ${end-start}ms`)
}

関数forfn(){
  a = []とする
  for(var i=0;i<arr.length;i++){
    // コンソール.log(i)
    a.push(arr[i])
  }
}
clecTime(forfn, 'for') //for 実行時間: 106ms

関数 forlenfn(){
  a = []とする
  for(var i=0,len=arr.length;i<len;i++){
    a.push(arr[i])
  }
}
clecTime(forlenfn, 'for len') //for len 実行時間: 95ms

関数 forEachfn(){
  a = []とする
  arr.forEach(item=>{
    a.push[アイテム]
  })
}
clecTime(forEachfn, 'forEach') //forEach 実行時間: 201ms

関数 forinfn(){
  a = []とする
  for(変数 i in arr){
    a.push(arr[i])
  }
}
clecTime(forinfn, 'forin') //forin 実行時間: 2584 ミリ秒 (とんでもない)

関数foroffn(){
  a = []とする
  for(変数 i の arr){
    a.push(i)
  }
}
clecTime(foroffn, 'forof') //forof 実行時間: 221ms

// ...残りは自分でテストできます

結果分析

ツールと手動テストの後、結果は基本的に同じです。配列トラバーサル方法の速度は、従来の for ループが最も速く、for-in が最も遅いです。

for-len > for > for-of > forEach > map > for-in

JavaScript ネイティブ トラバーサル メソッドの推奨される使用法:

  • forループで配列を反復処理する
  • for...in でオブジェクトを反復処理する
  • for...of を使用して配列のようなオブジェクトを反復処理する (ES6)
  • Object.keys() を使用してオブジェクト属性名のコレクションを取得します。

...in が遅いのはなぜですか?

for...in 構文はオブジェクト キーを反復処理できる最初の JavaScript ステートメントであるため、オブジェクト キー ({}) のループは配列 ([]) のループとは異なり、エンジンは反復処理されたプロパティを追跡するために追加の作業を行います。したがって、配列を走査するためにfor...inを使用することは推奨されません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript配列の一般的なメソッドの概要
  • JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明
  • JavaScriptの配列トラバーサルのforとforの違いの詳細な説明
  • Javascript 配列と辞書の使用法とオブジェクト属性のトラバーサルスキル
  • JS 配列とオブジェクトのトラバーサル メソッドのコード概要

<<:  Nginxはクロスドメインの問題を解決し、サードパーティのページを埋め込む

>>:  ボタントリガーイベントを使用して背景色の点滅効果を実現します

推薦する

MySql5.7.21 インストールポイント記録メモ

ダウンロードしたバージョンは、Zip 解凍版、Windows システムです。長い間 Windows ...

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...

Vue.jsは9グリッド画像表示モジュールを実装します

Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...

React NativeとiOSの相互作用の詳細な説明

目次前提条件RNはiOSに価値を渡す方法1: ネイティブに値を通常通り渡す方法2: コールバック関数...

spring-boot と docker-java に基づいて Docker コンテナの動的な管理と監視を実装します [完全なソース コードのダウンロード付き]

Docker入門Docker はオープンソースのアプリケーション コンテナ エンジンです。従来の仮...

MYSQLが中国語を認識できない問題の恒久的な解決策

ほとんどの場合、MySQL はインストールしたばかりのときは中国語をサポートしません。これはエンコー...

Linux で ss コマンドと zabbix を組み合わせてソケットを監視する方法の詳細な説明

目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...

Javascriptでオブザーバーモードを実装する方法を教えます

目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...

MySQL ビッグデータ クエリ最適化エクスペリエンスの共有 (推奨)

本格的な MySQL 最適化! MySQL のデータ量が少ない場合は最適化は不要です。データ量が多い...

高い同時実行性の下でNginxのパフォーマンスを最適化する方法をまとめます

目次特徴利点インストールとコマンド設定ファイルプロキシモードとリバースプロキシ構成フォワードプロキシ...

シェルスクリプトによるDockerコンテナの起動順序の制御の詳細な説明

1. 遭遇した問題分散プロジェクトの展開プロセスでは、サーバーの再起動後にアプリケーション(データベ...

私が遭遇したIE8の互換性に関する注意事項

1. IE8 の getElementById は id のみをサポートし、name はサポートしま...

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

Nginx+SpringBoot による負荷分散の実装例

負荷分散の概要Nginx の負荷分散実装を紹介する前に、負荷分散の分類について簡単に説明します。負荷...

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...