JSの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]

マップ

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。 関数の観点から理解する

プログラミングで関数を使用することに慣れている場合は、間違いなく map()

を使用することをお勧めします。

forEach() は元の配列の値を変更し、map() は新しい配列を返すため、元の配列は影響を受けません。 ＃＃＃＃＃＃＃＃＃どちらがいいですか？ 何をしたいかによって異なります。

forEach データを変更する予定はないが、データベースに保存したり印刷したりするなど、データを操作したいだけの場合に適しています。

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

map()

は、データの値を変更したい場合に適しています。高速なだけでなく、新しい配列を返します。この利点は、合成 (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()callback が元の配列の要素を変更できるようにします。
map()
• 新しい配列を返します。 関連する無料学習の推奨事項:

js ビデオ チュートリアル

その他のプログラミング関連知識については、プログラミング入門をご覧ください。 ！

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