ホームページ > 記事 > ウェブフロントエンド > JSのMapとForEachの違いを詳しく解説
すでに JavaScript の使用経験がある場合は、一見同一に見える 2 つのメソッド、Array.prototype.map()
と Array.prototype をすでにご存知かもしれません。 .forEach()。
それでは、それらの違いは何でしょうか?
まず、MDN の Map と ForEach の定義を見てみましょう:
forEach()
: 提供された関数を配列要素ごとに 1 回実行します。 map()
: 呼び出し配列内のすべての要素に対して提供された関数を呼び出した結果を含む新しい配列を作成します)。 #########違いはなんですか? 未定義を返します。つまり、
forEach() は元の配列を変更します。
map() メソッドは新しい配列を取得して返します。
例
forEach を使用できます。 目標を達成します。
let arr = [1, 2, 3, 4, 5];
ForEach
arr
の値を直接変更します。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]
これが forEach()
とmap() のテスト結果です:
できるだけ私のコンピュータでは、forEach()
の実行速度はmap() より 70% 遅いです。ブラウザの実行結果は人それぞれ異なります。次のリンクを使用してテストできます:
Map vs. forEach - jsPref。
関数の観点から理解する
forEach() は元の配列の値を変更し、
map() は新しい配列を返すため、元の配列は影響を受けません。 #########どちらがいいですか?
何をしたいかによって異なります。
let arr = ['a', 'b', 'c', 'd']; arr.forEach((letter) => { console.log(letter); }); // a // b // c // dmap()
は、データの値を変更したい場合に適しています。高速なだけでなく、新しい配列を返します。この利点は、合成 (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()
は新しい配列を格納するためのメモリ領域を割り当ててそれを返しますが、forEach()
はデータを返しません。 forEach()
callback
が元の配列の要素を変更できるようにします。
関連する無料学習の推奨事項:
以上がJSのMapとForEachの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。