web-dev-qa-db-ja.com

JavaScript：.forEach（）と.map（）の違い

このようなトピックがたくさんあったことは知っています。そして、私は基本を知っています：.forEach()は元の配列で動作し、.map()は新しい配列で動作します。

私の場合：

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

そして、これは出力です：

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

practiceを使用するとbの値がundefinedに変更される理由がわかりません。
これがばかげた質問であれば申し訳ありませんが、私はこの言語ではまったく新しいので、これまでに見つけた答えは私を満足させませんでした。

javascriptarraysloopsforeach
81
DzikiChrzan

それらは同一ではありません。違いを説明しましょう。

forEach：これはリストを反復し、副作用を伴う操作を各リストメンバーに適用します（例：すべてのリストアイテムをデータベースに保存します）

map：リストを反復処理し、そのリストの各メンバーを変換し、変換されたメンバーと同じサイズの別のリストを返します（例：文字列のリストを大文字に変換）

参照資料

Array.prototype.forEach（）-JavaScript | MDN

Array.prototype.map（）-JavaScript | MDN

105
Richard Hamilton

  • Array.forEach「配列要素ごとに提供された関数を1回実行します。」

  • Array.map「この配列のすべての要素で提供された関数を呼び出した結果で新しい配列を作成します。」

したがって、forEachは実際には何も返しません。配列要素ごとに関数を呼び出すだけで完了です。そのため、呼び出された関数内で返されるものはすべて単に破棄されます。

一方、mapは同様に各配列要素に対して関数を呼び出しますが、戻り値を破棄する代わりに、それをキャプチャして、それらの戻り値の新しい配列を構築します。

これはまた、couldmapを使用している場合は常にforEachを使用することを意味しますが、それを行うべきではないので、目的。不要な場合は収集しないほうが効率的です。

46
poke
 + ---------------- + --------------------------- ---------- + --------------------------------------- + 
 | | foreach |地図| 
 + ---------------- + ------------------------- ------------ + ------------------------------------- -+ 
 |機能性|それぞれに所定の操作を実行します| | 
 |で指定された「変換」を実行します|配列の要素|各要素の「コピー」| 
 + ---------------- + -------------------- ----------------- + -------------------------------- ------- + 
 |戻り値|未定義を返します|変換された新しい配列を返します| 
 | | |元の配列を戻す要素| 
 | | |変更なし| 
 + ---------------- + ------------------------- ------------ + ------------------------------------- -+ 
 |優先| |のような非変換の実行| 
 |の出力を含む配列を取得する使用シナリオ|各要素の処理。 |各要素で行われるいくつかの処理| 
 |と例| |配列の。 | 
 | |たとえば、すべての要素を|に保存します| 
 | |データベース|たとえば、| 
 |の配列を取得する| | | 
 |の各文字列の長さ| |配列| 
 + ---------------- + ------------------------- ------------ + ------------------------------------- -+
17
Mahesha999

知っておく必要がある主な違いは、.map()は新しい配列を返しますが、.forEach()は返しません。そのため、出力にその違いが見られます。 .forEach()は、配列内のすべての値に作用します。

読む：

また、チェックアウトすることもできます。- Array.prototype.every()-JavaScript | MDN

15
Rahul Desai

forEach：配列の要素に対してアクションを実行する場合、forループを使用する場合と同じです。このメソッドの結果は、単に要素をループするだけのアウトプット購入ではありません。

map：配列の要素に対してアクションを実行する場合、およびアクションの出力を配列に保存する場合。これは、各反復後に結果を返す関数内のforループに似ています。

お役に立てれば。

6
Amarnath Jeyakumar

違いは返されるものにあります。実行後：

arr.map()

処理された関数の結果の要素の配列を返します。一方：

arr.forEach()

未定義を返します。

3
Godwin Ekuma

パフォーマンス分析配列内の要素の数が増えると、forループはmapまたはforeachよりも高速に実行されます。

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.Push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');
2
sonia kaushal