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 を応援していただければ幸いです。

以下もご興味があるかもしれません: