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データのバックアップ方法の選択と考え方

推薦する

適応分析と応答分析の違いを専門用語で詳しく説明

日々の開発経験と関連するオンライン情報に基づいて、アダプティブとレスポンシブの違いをシンプルでわかり...

MySQL 5.7 で業務を停止せずに従来のレプリケーションを GTID レプリケーションに変更する例

GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...

Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル

目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...

CentOs でノード バージョンを手動でアップグレードする方法

1. 対応するNode.jsパッケージを見つけます。https://nodejs.org/downl...

挿入前にレコードが既に存在するかどうかを確認するには、SQL ステートメントを使用します。

目次SQL文を挿入する前にレコードが既に存在するかどうかを確認するSQL挿入時の判断の簡単なコレクシ...

時間範囲効果を実現するためのJavaScript

この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...

Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...

Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)

1. 問題Docker コンテナのログにより、ホストのディスク領域がいっぱいになりました。 doc...

JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...

Mysql 文字列の傍受と指定された文字列内のデータの取得

序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

Webスキル: 複数のIEバージョンの共存ソリューション IETester

私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...

CSSレイアウトにおけるフロート属性と位置属性の違い

CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...