ホームページ  >  記事  >  ウェブフロントエンド  >  JS 配列の走査方法の概要

JS 配列の走査方法の概要

零到壹度
零到壹度オリジナル
2018-04-21 15:24:171566ブラウズ

JS 配列トラバーサルは、適切な場所でメソッドを使用する必要があります。ここでは、それを示すために es6 を使用し、変換をビルドする必要があります。 es5 環境については、この記事の焦点では​​ありません。これについては次の記事で書くことができます。

1. for ループ

は最も頻繁に使用され、フロントエンドで使用されます。つまり、for ループは先頭でのみ使用されます。 。 。

let arr = [&#39;123&#39;, &#39;456&#39;, &#39;789&#39;];for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
}

最も一般的に使用されますが、最適化の余地があります:

for (let i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
}

配列の長さを繰り返し取得することを避けるために、一時変数を使用して長さの値を保存します。

2. for...of ループ

es6 の新しいループ メソッドは、es5 の for ループよりもシンプルで効率的です:

  1. key() はキー名を走査します。 ;

  2. value() はキー値の走査です;

  3. entries() はキーと値のペアの走査です

  4. let arr = [&#39;科大讯飞&#39;, &#39;政法BG&#39;, &#39;前端开发&#39;];
    for (let item of arr) {  
      console.log(item);
    }
    // 输出数组索引
    for (let item of arr.keys()) {  
      console.log(item);
    }
    // 输出内容和索引
    for (let [item, val] of arr.entries()) {  
      console.log(item + &#39;:&#39; + val);
    }
3. foreach ループ

配列の foreach メソッドが使用されます。より頻繁に実行されますが、パフォーマンスが低下します。for ループよりも弱いです。これには、空の配列要素を自動的に省略できるという利点があり、これは自動的に空にするのと同じです。

let arr = [&#39;科大讯飞&#39;, ,  &#39;政法BG&#39;, , &#39;前端开发&#39;];
arr.forEach((val,index)=>console.log(index,val));

4. フィルター ループ

にはループ関数があり、主に配列をフィルターするために使用され、関数に準拠する要素のコレクションを返すメソッドを受け取ります。

let arr = [{
    label: &#39;科大讯飞&#39;,    
    value: 1
}, {
    label: &#39;政法BG&#39;,    value: 2
}, {
    label: &#39;前端开发&#39;,    value: 3
}];

const arr1 = arr.filter(list => list.value === 1);
console.log(arr1);

5. 一部のループ

にはフィルターと同じ機能がありますが、配列内にオブジェクトが存在するかどうかを確認するために使用されるブール値を返す点が異なります。

if (arr.some(list => list.value === 1)) {
    console.log(&#39;执行了!&#39;)
}

なのでifでよく使われます。

6.マップループ

の関数は、元の配列の各要素に対してコールバック関数を呼び出すことで返された値のセットを返します。

let arr = [1, 2, 3, 4];
onst arr1 = arr.map(list => list * 2);
console.log(arr1);

上記は一般的に使用される配列走査メソッドであり、将来的には、どこでも for ループを使用する代わりに、実際の状況に応じて 1 つのメソッドを使用できるようになります。


関連する推奨事項:

配列を走査するための一般的なメソッド

リストコレクションを走査するための 3 つのメソッド

H の詳細な説明Java 8のashMap(ストレージ構造、関数実装) 、拡張 最適化、スレッド セーフ、トラバーサル メソッド)

データ構造を再確認: バイナリ ツリーの一般的なメソッドと 3 つのトラバーサル メソッド Java 実装


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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。