JavaScript--マップ vs ForEach #JavaScript

JavaScriptのMapとForEachの違いは何ですか？

Array.prototype.map()Array.prototype.forEach()JavaScriptを使い続けていれば、おそらく2つの似たような配列メソッドに出会ったことがあるでしょう。

では、どう違うのですか？

まずはMDNで定義を見てみましょう：

どういう意味ですか？

forEachメソッドは実際には何も返しません。単に配列の各要素に対してメソッドを提供するだけです。コールバックメソッドは呼び出された配列を変更することができます。

訳者補足


let arr = [1, 2, 3]
arr.forEach((item, index)=> {
arr[index] = item * 3
})
console.log(arr) // [3, 6, 9]

同様に、map() は配列の各要素に対してメソッドをコールします。違いは、map() は返り値を使用し、実際には配列と同じサイズの新しい配列を返すことです。

次のような配列を考えてみましょう。相対配列の要素がdouble の場合、map や forEach を使うことができます。


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

ForEach。

注意：forEach関数の返り値は破棄されるため、返り値を返すことはありません。


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

結果


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

地図


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

結果


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

JavaScriptのメソッドや関数の実行速度の違いをテストするには、jsPerfは良いサイトです。

forEach() vsmap()のテスト結果です。

関数型プログラミングが好きなら、map()の使い方を理解することは重要です。

しかし、forEach() は元の配列に影響を与えて変更することができるので、 map() は完全に新しい配列を返します。

どちらが良いですか？

どのような機能を実現しようとしているかによります。

ForEach() は、配列の要素を変更したくない場合に適しています。たとえば、要素をデータベースに保存したり出力したりといった単純な処理を行いたい場合などです。


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

map()については、データを変更したい場合に適しています。実行速度が速いだけでなく、新しい配列を返すからです。つまり、他のメソッドとの連鎖呼び出しのような素晴らしいことができるということです。


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

上の例では、まず arr を繰り返し処理し、配列の各要素を掛け算します。次に、新しい配列がフィルタリングされ、[6,8,10]より大きい要素のみが保持されます。この結果、最終的な配列 arr2 の値は [6,8,10] となります。

JavaScript--マップ vs ForEach