JSアレイループと効率解析の比較

アレイのためのメソッド

この記事では、配列のトラバースの方法とそれぞれの性能に焦点を当てます。多くのメソッドがある中で、自分たちの開発に最適なものを選ぶのは非常に有用です。

画像

配列探索のためのメソッド

について

• 標準的な for ループ文であり、最も伝統的なループ文である

var arr = [1,2,3,4,5]
for(var i=0;i<arr.length;i++){
  console.log(arr[i])
}

最もシンプルなトラバース方法であり、最も頻繁に使用され、パフォーマンスも良いが、最適化することができる

• forループ文の最適化版

var arr = [1,2,3,4,5]
for(var i=0,len=arr.length;i<len;i++){
  console.log(arr[i])
}

一時変数を使って長さをキャッシュし、特に配列の長さが大きい場合に、繰り返し取得することを避けることができます。

この方法は、基本的にループトラバーサルの中で最も高いパフォーマンスを発揮する方法である

フォーイーチ

• 通常のforEach

配列の各要素に対して、指定した関数を実行します（戻り値はありません）。

var arr5 = [10,20,30]
var result5 = arr5.forEach((item,index,arr)=>{
    console.log(item)
})
console.log(result5)
/*
10
20
30
undefined This method has no return value
*/

配列にはforeachループが付属しており、これは通常のforループよりも使用頻度が高く、実際にはパフォーマンスが弱くなります

• プロトタイプ forEach

foreachはArray型なので、Array型でないもの（例えばNodeList）には直接使えないので、このバリアントが用意されています。このバリアントを使うことで、類似の配列にforeach関数を持たせることができます。

{{コード

実際の性能は通常のforeachより弱くなります

for... .in

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

は一般に、非整数の型の名前と、プロトタイプチェーンより上位の継承されたプロパティを含む、オブジェクトを反復処理するために使用されます。Array や Object などの組み込みコンストラクタで生成されたオブジェクトは Object.prototype を継承し、String.prototype の非列挙型プロパティは走査することができない。

{{コード

ほとんどの人が好んで使う方法ですが、あまり性能がよくありません

for... .of (オブジェクトに対して反復処理できない)

反復可能なオブジェクト（イテレータインターフェースを持つ）（Array, Map, Set, String, arguments）に対して反復ループを作成し、カスタム反復フックを呼び出して異なるプロパティの値に対してステートメントを実行する、オブジェクトを反復することはできない。

{{コード

この方法はes6で使用されており、forinよりもパフォーマンスが良いが、それでも通常のforループには及ばない

地図

map: 配列を反復処理するのみで、割り込みはできません、戻り値は変更後の配列です。

const nodes = document.querySelectorAll('div')
Array.prototype.forEach.call(nodes,(item,index,arr)=>{
  console.log(item)
})

それぞれ

配列の各項目に対して与えられた関数を実行し、各項目で関数が true を返した場合、その関数は true を返します。

var arr = [1,2,3,4,5]
for(var i in arr){
  console.log(i,arr[i])
} //i here is the object property, which is the subscript of the array
/**
0 1
1 2
2 3
3 4
4 5 **/

一部

配列の各項目に対して与えられた関数を実行し、項目のいずれかが true を返した場合は true を、すべての項目が false を返した場合は false を返します。

let arr=["Front","SouthJu","sssss"];
    for (let item of arr){
        console.log(item)
    }
//front-end NanJiu ssss

//traversing objects
let person={name:"南玖",age:18,city:"上海"}
for (let item of person){
  console.log(item)
}
// We found out that it is not possible We can use it with Object.keys
for(let item of Object.keys(person)){
    console.log(person[item])
}
// Nanjiu 18 Shanghai

減らす

reduce() メソッドは、指定したリデューサ関数を配列の各要素に対して (昇順で) 実行し、結果を集約してひとつの返り値を返します。

let arr=[1,2,3];
const res = arr.map(item=>{
  return item+1
})
console.log(res) //[2,3,4]
console.log(arr) // [1,2,3]

フィルター

配列中の指定した関数を実行するたびに、その関数を満たす項目の配列を返します。

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

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

ツールを使ったテスト 性能解析 その結果を下図に示します。

マニュアルテスト

また、コードを使って自分たちでテストすることもできます。

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

結果の分析

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

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

javascriptのネイティブトラバーサルメソッドの推奨使用法。

• forループによる配列の反復処理
• for... .in を使ってオブジェクトを繰り返し処理する
• for... .of を使って配列のようなクラスオブジェクトを反復処理する (ES6)
• Object.keys()でオブジェクトのプロパティ名のコレクションを取得する

なぜfor...がスローなのか？

なぜなら for ... in 構文は、オブジェクトのキーに対して反復処理を行うことができる最初の JavaScript ステートメントだからです。オブジェクトのキー（{}）に対するループ処理は、配列（[]）に対するループ処理とは異なり、エンジンは反復処理されたプロパティを追跡するためにいくつかの余分な作業を実行します。したがって、for.Key を使用することはお勧めしません。.in を使用して配列を反復処理することはお勧めしません。

以上が今回の記事の全内容です。皆様の学習のお役に立てれば幸いです。また、BinaryDevelopをより支持していただけると幸いです。