JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

forEach() (ES6) メソッド

forEach() (ES6) メソッドは、配列の各要素に対して指定された関数を 1 回実行します。

1. このメソッドのコールバックは、配列内の要素の数だけ実行されます。
2. 最初のパラメータは配列内の要素、2 番目のパラメータは配列内の要素のインデックス、3 番目のパラメータは配列自体です (3 番目のパラメータは配列の重複を排除するために使用できます)
3. ループ数が不明の場合や計算が複雑な場合は、配列自体のトラバーサルメソッドである foreach の方が for ループよりも効率的です。
4. ループされた配列要素は基本データ型であり、元のデータのデータは変更されません。ループされた配列要素はオブジェクトであり、元の配列のオブジェクト属性の値を変更します。
5. ループ中のインデックス変更はサポートされていません。コールバックで return を使用するとエラーは報告されませんが、無効です。

注意: breakとcontinueを使用してループ全体または現在のループから抜け出すことはできません。エラーが報告されますが、try...catchを組み合わせることでループから抜け出すことができます。

定数配列1 = ['a', 'b', 'c'];
array1.forEach(要素 => console.log(要素));

デメリット: `forEach()` ループを中止したり抜け出す方法がない

map() (ES6) メソッド

map() (ES6) メソッドは、各要素が指定された関数を 1 回呼び出した戻り値である新しい配列を作成します。

    定数配列1 = [1, 4, 9, 16];
    定数 map1 = array1.map(x => x * 2);
    console.log(map1); //[2, 8, 18, 32]

3つのパラメータ: 配列要素、要素インデックス、元の配列自体

flatMap() メソッド

flatMap() メソッドは、まずマッピング関数を使用して各要素をマッピングし、次に結果を新しい配列に圧縮します。これは、map の後に深度 1 の flat を続けるのとほぼ同じですが、flatMap は通常、1 つのメソッドに組み合わせると若干効率的になります。

    var arr1 = [1, 2, [3, 4]];
    arr1.flatMap(x => x); //[1, 2, 3, 4]
    var arr1 = [1, 2, 3, 4];
    arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

...のために...

このループも多くの人が使用していますが、最も効率が悪いです (出力キーは配列のインデックスです)。オブジェクトが走査されると、出力はオブジェクトの属性名になります。

...のために...

パフォーマンスは `for..in...` よりは良いですが、通常の `for` ループほど良くはありません。
注: オブジェクトはループできません。これは、Iterator インターフェースが配置されている限り、どのデータ構造でもトラバースできるためです。Array、Map、Set、String などの一部のデータ構造には、Iterator インターフェースがネイティブに用意されており、Iterator インターフェースはデータ構造の Symbol.iterator 属性に配置されていますが、オブジェクト Object には Symbol.iterator 属性がないため、for..of でトラバースすることはできません。

フィルタ（ES6）は配列を走査する

filter (ES6) は配列を走査し、条件を満たす要素をフィルタリングして新しい配列を返します。配列の要素がテストに合格しない場合は、空の配列が返されます。

    定数結果 = words.filter(word => word.length > 6);
    console.log(result) //["興奮", "破壊", "存在"]
some() 関数 (ES6)
    配列を反復処理して、条件を満たす要素があるかどうかを確認します。戻り値はブール値です。条件を満たす要素が見つかると、true を返します。
    var arr = [
     { id: 1、name: 'ペンを購入する'、done: true }、
     { id: 2、name: 'ノートパソコンを購入する'、done: true }、
     { id: 3、name: '書道の練習'、done: false }
    ]
    
    var bool = arr.some(関数 (item, index) {
     返品商品。完了
    })
    console.log(bool) // true

every() 関数 (ES6)

配列の各要素がコールバック関数のテストに合格するかどうかをテストします
すべて合格した場合はtrueを返し、そうでない場合はfalseを返します。
簡単に言うと、コールバック関数が毎回 true を返す場合、 every() は true を返し、それ以外の場合は false を返します。

    var arr = [
        { id: 1、name: 'ペンを購入する'、done: true }、
        { id: 2、name: 'ノートパソコンを購入する'、done: true }、
        { id: 3、name: '書道の練習'、done: false }
    ]
    var bool = arr.every((item, index) => {
        返品商品。完了
    })
    console.log(bool) // false

find() 関数 (ES6)

テストに合格した最初の要素を返します。テストに合格した要素がない場合は、**undefined** を返します。

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    var num = arr.find( (項目, インデックス) => {
        返品アイテム === 3
    })
    console.log(数値) // 3

findIndex() 関数 (ES6)

この関数は、渡された最初の要素のインデックスを返す点を除いて、上記の find() と同じ効果があります。

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    var num = arr.findIndex(item => {
        返品アイテム === 3
    })
    console.log(数値) // 4

これで、JS 配列の組み込みトラバーサルメソッドとその違いに関するこの記事は終了です。JS 配列の組み込みトラバーサルに関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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