Map と ForEach の使用の違い

今回は、Map と ForEach の使用の違いと、Map と ForEach を使用する際の 注意事項 についてお届けします。実際のケースを見てみましょう。

すでに JavaScript の

経験がある場合は、おそらく同じように見える 2 つのメソッド、Array.prototype.map() と Array.prototype.forEach() をすでにご存知でしょう。 では、それらの違いは何ですか?

定義

まず MDN の Map と ForEach の定義を見てみましょう:

forEach(): 提供された関数を配列要素ごとに 1 回実行します。

map(): 呼び出し元の配列のすべての要素に対して指定された関数を呼び出した結果を含む新しい配列を作成します。

違いは何ですか？ forEach() メソッドは実行結果を返しませんが、未定義です。つまり、forEach() は元の配列を変更します。 map() メソッドは新しい配列を取得して返します。

例

配列を以下に示します。その中の各要素を 2 倍にしたい場合は、map と forEach を使用して目的を達成できます。

let arr = [1, 2, 3, 4, 5];

ForEach

forEach は意味のある値を返さないことに注意してください。

コールバック関数

内の arr の値を直接変更します。

arr.forEach((num, index) => {
 return arr[index] = num * 2;
});

実行結果は次のとおりです:

// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
 return num * 2;
});

実行結果は次のとおりです:

// doubled = [2, 4, 6, 8, 10]

実行速度の比較

jsPrefは、さまざまなJavaScriptの実行速度を比較するのに非常に優れたWebサイトです。機能。

forEach()とmap()のテスト結果は次のとおりです:

私のコンピュータでのforEach()の実行速度はmap()よりも70%遅いことがわかります。ブラウザの実行結果は人それぞれ異なります。次のリンクを使用してテストできます: Map vs. forEach - jsPref。

JavaScript は非常に柔軟なので、バグがあるかどうかわからないほど、オンラインでリアルタイム監視するために Fundebug に接続することもできます。

関数の観点から理解する

プログラミングで

関数を使用する

ことに慣れているなら、間違いなく map() を使いたくなるでしょう。 forEach() は元の配列の値を変更し、map() は新しい配列を返すため、元の配列は影響を受けません。

どれが良いですか？

何をしたいかによる。

forEach は、データを変更する予定はないが、データベースに保存したり印刷したりするなど、データを使用して何かをしたい場合に適しています。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

map()はデータの値を変更したい場合に適しています。高速なだけでなく、新しい配列を返します。この利点は、複合 (com

position

) (map()、filter()、reduce() などを組み合わせて) を使用して、より多くのトリックを実行できることです。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

まず、map を使用して各要素を 2 倍し、次に 5 より大きい要素をフィルターで除外します。最終結果は arr2 に割り当てられます。 要点

forEach()が使えればmap()でもできます。その逆もまた真です。

map() は新しい配列を保存するためにメモリ空間を割り当ててそれを返しますが、forEach() はデータを返しません。

forEach() を使用すると、コールバックで元の配列の要素を変更できます。 map() は新しい配列を返します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

画像がロードされる前にローディングサークルを表示する効果

Webアプリケーション開発にNode.jsを選択する理由

以上がMap と ForEach の使用の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。