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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript配列の一般的なメソッドの概要
  • JavaScriptの配列トラバーサルのforとforの違いの詳細な説明
  • Javascript 配列と辞書の使用法とオブジェクト属性のトラバーサルスキル
  • JS 配列とオブジェクトのトラバーサル メソッドのコード概要
  • JS配列ループ方式と効率分析の比較

<<:  光るテキストとちょっとしたJS特殊効果を実現するCSS

>>:  MySQLデータのバックアップ方法の選択と考え方

推薦する

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

JavaScriptはマウスの動きに追従するボックスを実装します

この記事では、マウスの動きを追跡するためのJavaScriptの具体的なコードを参考までに紹介します...

MySQL 8.0.22 zip圧縮パッケージ版(無料インストール)のダウンロード、インストール、および構成手順の詳細

目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...

ページング効果を実現するNode+Express

この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...

Linux に Python 3.8.1 をインストールするための詳細なチュートリアル

この例では、Linux への Python 3.8 のインストールを例に挙げます。 1. 依存パッケ...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

さようなら Docker: 5 分で Containerd に移行する方法

Docker は非常に人気のあるコンテナ技術です。K8S によって廃止され、別のコンテナ技術である ...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 1) (パート 35)

データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...

Vue で SuperMap を使用する練習

目次序文関連資料Vue プロジェクトが 2 次元ハイパーグラフを導入ハイパーグラフ 2D ケース引用...

DIV 背景半透明テキスト非半透明スタイル

DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...

HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...

Windows で MySQL サービスを停止または削除できない問題の解決策

圧縮パッケージを解凍して Windows に MySQL をインストールしました。インストール方法は...

Dockerコンテナでルート権限を取得する方法

まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...