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 ]

を使用してtoのpractice値を変更する理由を理解できません。 これがばかげた質問だとは申し訳ありませんが、私はこの言語にかなり慣れていないので、これまでに見つけた回答で満足できませんでした。bundefined

彼らは同じではありません。違いを説明させてください。

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

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

参考文献

Array.prototype.forEach（）-JavaScript | MDN

Array.prototype.map（）-JavaScript | MDN

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

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

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

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

これは、使用している場所であればどこでも使用できることを意味しますが、それを行うべきではないため、目的なしに戻り値を収集しません。不要な場合は収集しない方が効率的です。mapforEach

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

あなたが知る必要がある主な違いは、そうではない.map()のに新しい配列を返すことです.forEach()。そのため、出力にその違いが見られます。.forEach()配列のすべての値を操作するだけです。

読んでください：

• Array.prototype.forEach()-JavaScript | MDN
• Array.prototype.map()-JavaScript | MDN

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

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

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

お役に立てれば。

違いは、彼らが返すものにあります。実行後：

arr.map()

処理された関数の結果である要素の配列を返します。その間：

arr.forEach()

未定義を返します。

パフォーマンス分析 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');

Foreachとmapの違い：

Map（）：mapを使用する場合、mapはメイン配列を繰り返すことにより新しい配列を返すことができます。

Foreach（）：Foreachを使用する場合、メイン配列を反復できるそれぞれに対して何も返すことができません。

useFulリンク：相違を理解するためにこのリンクを使用します

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

注意すべき点の1つは、foreachが初期化されていない値をスキップするのに対し、mapはスキップしないことです。

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

forEach（）とmap（）の違い

forEach（）は要素をループします。これは戻り値を破棄し、常に未定義を返します。このメソッドの結果は出力を提供しません。

要素をループするmap（）は、メモリを割り当て、メイン配列を反復することによって戻り値を格納します

例：

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map（）はforEach（）より高速です

マップは暗黙的に戻りますが、forEachは戻りません。

これが、JSXアプリケーションをコーディングするとき、Reactでコンテンツを表示するために、ほとんどの場合、forEachではなくmapを使用する理由です。

forEach（）：

戻り値：未定義

originalArray：メソッド呼び出し後に変更

map（）：

戻り値：呼び出し元の配列のすべての要素で提供された関数を呼び出した結果が入力された新しい配列

originalArray：メソッド呼び出し後に変更されません