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.every() - JavaScript | MDN

Answer 5

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

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

希望这有帮助。

Answer 6

map 返回一个新数组。

forEach 没有返回值。

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

Answer 7

不同之处在于他们的回归。执行后：

arr.map()

返回由已处理函数产生的元素数组; while：

arr.forEach()

返回undefined。

Answer 8

要指出的一件事是，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];

Answer 9

Foreach与地图之间的差异：

Map（）：如果使用map，则map可以通过迭代主数组来返回新数组。

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

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

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

Answer 10

forEach（）：

返回值：未定义

originalArray：方法调用后未修改

方法调用结束后未创建newArray。

地图（）：

返回值：新数组填充了在调用数组中每个元素上调用提供的函数的结果

originalArray：方法调用后未修改

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

Since map builds a new array, using it when you aren't using the
returned array is an anti-pattern; use forEach or for-of instead.

Answer 11

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

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（）快

Answer 13

地图隐式返回，而forEach则不会。

这就是为什么在编写JSX应用程序时，几乎总是使用map而不是forEach to display content in React。

Answer 14

.map 和 .forEach 将做几乎相同的事情，直到您开始对具有数百万个元素的数组进行操作。 .map 将创建另一个具有相同大小（可能还有类型，取决于数组种类）的集合，这可能会占用大量内存。 .forEach 不会这样做。

JavaScript：.forEach（）和.map（）之间的区别

14 个答案: