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更改bto的值undefined。
如果这是一个愚蠢的问题，我感到很抱歉，但是我是这种语言的新手，到目前为止我发现的答案并不令我满意。

它们是不一样的。让我解释一下区别。

forEach：这会遍历列表，并对每个列表成员应用一些有副作用的操作（例如：将每个列表项保存到数据库）

map：这会遍历一个列表，转换该列表的每个成员，然后返回与转换后的成员大小相同的另一个列表（例如：将字符串列表转换为大写）

参考资料

Array.prototype.forEach（）-JavaScript | MDN

Array.prototype.map（）-JavaScript | MDN

• Array.forEach “每个数组元素执行一次提供的功能。”

• Array.map “创建一个新数组，其结果是对该数组中的每个元素调用一个提供的函数。”

因此，forEach实际上不返回任何东西。它只是为每个数组元素调用函数，然后就完成了。因此，您在该调用函数中返回的任何内容都将被简单丢弃。

另一方面，map将类似地为每个数组元素调用该函数，但不是丢弃其返回值，而是将其捕获并为这些返回值构建新的数组。

这也意味着您可以map在任何使用位置使用它，forEach但是仍然不应该这样做，因此您不会出于任何目的而收集返回值。如果您不需要它们，不收集它们会更有效率。

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | 地图|
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| 功能| 对每个|执行给定的操作。在|上执行给定的“转换”
| | 数组的元素| 每个元素的“副本” |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| 返回值| 返回未定义 返回转换后的新数组|
| | | 保留原始数组的元素|
| | | 不变
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| 首选| 执行非转换，如| 获取包含|的输出的数组
| 使用场景| 对每个元素进行处理。| 每个元素上完成的一些处理|
| 和示例 | 的数组。|
| | 例如，将所有元素保存在|中。|
| | 数据库| 例如，获得|的数组
| | | |中每个字符串的长度
| | | 数组|
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

您需要知道的主要区别是.map()返回一个新数组，而.forEach()没有返回。这就是为什么您看到输出中的差异。.forEach()只是对数组中的每个值进行操作。

阅读：

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

您可能还想签出：Array.prototype.every()--JavaScript | MDN

forEach：如果要对Array的元素执行操作，则该操作与for循环相同。这种方法的结果并不能使我们获得遍历元素的购买循环。

map：如果要对数组的元素执行操作，并且还希望将操作的输出存储到Array中。这类似于在每次迭代后返回结果的函数中的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可以通过迭代主数组来返回新数组。

Foreach（）：如果您使用Foreach，那么对于每个可以迭代的主数组，它都不会返回任何内容。

useFul链接：使用此链接可了解差异

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

要指出的一件事是，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（）只是遍历元素。它会丢弃返回值，并且始终返回undefined。此方法的结果没有给我们输出。

通过元素循环的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（）更快

Map隐式返回，而forEach则不。

这就是为什么在编写JSX应用程序时，几乎总是使用map而不是forEach在React中显示内容。

forEach（）：

返回值：未定义

originalArray：方法调用后修改

map（）：

返回值：新数组，其中包含在调用数组中的每个元素上调用提供的函数的结果

originalArray：方法调用后未修改