JavaScript:.forEach()和.map()之间的区别

Question

我知道有很多这样的话题.我知道基础知识:.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.
如果这是一个愚蠢的问题,我很抱歉,但我对这种语言很新,我找到的答案到目前为止并不能让我满意.

Answer 1

他们不是同一个人.让我解释一下这个区别.

forEach:迭代列表并将一些带副作用的操作应用于每个列表成员(例如:将每个列表项保存到数据库)

map:迭代列表,转换该列表的每个成员,并返回与转换成员相同大小的另一个列表(例如:将字符串列表转换为大写)

参考

Array.prototype.forEach() - JavaScript | MDN

Array.prototype.map() - JavaScript | MDN

Answer 2

• Array.forEach "每个数组元素执行一次提供的函数."

• Array.map "创建一个新数组,其结果是在此数组中的每个元素上调用提供的函数."

所以,forEach实际上并没有返回任何东西.它只调用每个数组元素的函数然后就完成了.因此,无论你在被调用函数中返回什么,都会被丢弃.

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

这也意味着您可以map在任何使用的地方使用,forEach但您仍然不应该这样做,因此您不会在没有任何目的的情况下收集返回值.如果你不需要它们,那么不收集它们会更有效率.

Answer 3

+----------------+-------------------------------------+---------------------------------------+
|                | foreach                             | map                                   |
+----------------+-------------------------------------+---------------------------------------+
| Functionality  | Performs given operation on each    | Performs given "transformation" on    |
|                | element of the array                | "copy" of each element                |
+----------------+-------------------------------------+---------------------------------------+
| Return value   | Returns undefined                   | Returns new array with tranformed     |
|                |                                     | elements leaving back original array  |
|                |                                     | unchanged                             |
+----------------+-------------------------------------+---------------------------------------+
| Preferrable    | Performing non-transformation like  | Obtaining array containing output of  |
| usage scenario | processing on each element.         | some processing done on each element  |
| and example    |                                     | of the array.                         |
|                | For example, saving all elements in |                                       |
|                | the database                        | For example, obtaining array of       |
|                |                                     | lengths of each string in the         |
|                |                                     | array                                 |
+----------------+-------------------------------------+---------------------------------------+

Answer 4

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

阅读:

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

您可能还想看看: - Array.prototype.every()- JavaScript | MDN

Answer 5

性能分析 随着数组中元素数量的增加，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');

Answer 6

forEach()：

• 返回值：未定义

• OriginalArray ：方法调用后未修改

• 方法调用结束后不会创建 newArray。

地图（）：

• 返回值：新数组，其中填充了对调用数组中每个元素调用所提供函数的结果

• OriginalArray ：方法调用后未修改

• newArray 在方法调用结束后创建。

结论：

由于 map 构建了一个新数组，因此在不使用返回的数组时使用它是一种反模式；使用 forEach 或 for-of 代替。

Answer 7

forEach:如果要对Array的元素执行操作,它与用于for循环的操作相同.这种方法的结果并没有给我们一个输出购买只是循环通过元素.

map:如果要对数组的元素执行操作,并且还希望将操作的输出存储到Array中.这类似于在每次迭代后返回结果的函数中的for循环.

希望这可以帮助.

Answer 8

不同之处在于它们返回的内容。执行后：

arr.map()

返回由处理函数产生的元素数组；尽管：

arr.forEach()

返回未定义。

Answer 9

map 返回一个新数组。

forEach 没有返回值。

这就是差异的核心。这里的大多数其他答案都有效地说明了这一点，但方式要复杂得多。