前端进阶-个人笔记-玩转JS数组-map和foreach区别

Map & ForEach 定义

在MDN上的定义：

• forEach() – 对数组中的每个元素执行提供的函数
• map() – 在被调用的数组基础上创建一个新数组，并对数组中的每个元素执行方法

forEach方法实际上没有返回什么东西（undefined）。它只是简单为数组中的每个元素提供一个方法。允许该回调方法改变调用的数组。

let arr = [1, 2, 3]
arr.forEach((item, index)=> {
arr[index] = item * 3
})
console.log(arr) // [3, 6, 9]

map()也为数组中的每个元素都提供了方法调用。区别在于，map()使用返回值，并实际返回和（旧）数组相同大小的新数组。

console.log(

[1, 2, 3].map(item => {

​ console.log(item)

})

)

// 1

// 2

// 3

// [undefined, undefined, undefined]

ForEach:

注意：你永远不会从forEach函数的返回return值，因为返回值被抛弃。

arr.forEach((num, index) => {
  return arr[index] = num * 2;
});

结果：

// arr = [2, 4, 6, 8, 10]

Map:

let doubled = arr.map(num => {
  return num * 2;
});

结果：

// doubled = [2, 4, 6, 8, 10]

速度注意事项
测试JavaScript方法和函数执行速度区别，jsPerf是一个很好的网站。

下面是我对forEach()vsmap()的测试结果。

正如你看到的，在我的机器上，forEach()比map()执行速度慢了超过70%。在你的浏览器上可能不同.

功能注意事项
如果你喜欢函数编程，明白如何使用map()很重要。

因为forEach()可以影响并更改我们原有的数组，然而，map()返回一个完整的新数组–它不会更改原数组。
哪个更好？
这取决于你尝试实现什么功能。

当你尝试不更改你数组元素的时候，forEach()更合适些。比如只是想简单干点什么：比如将元素存储到数据库或者打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
  console.log(letter);
});
// a
// b
// c
// d

至于map()，当你想变更数据的时候，它更合适些。不仅仅因为它执行速度更快，而且它返回一个新数组。这就意味着我们可以做一些很棒的事，比如和其他方法（map()，filter()，reduce()等）链式调用。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

上面的示例首先是遍历arr，为数组的每个元素乘2。接着，我们过滤新数组，并且只保留大于5的元素。这就得到了我们的最终数组arr2，值为[6,8,10]。

重点

• 几乎能用forEach()实现的功能，都可以使用map()实现，反之亦然。
• map()分配内存并存储返回值。forEach()摒弃返回值，并最终返回undefined（这个方法没有返回值）。
• forEach()允许回调函数更改当前的数组。map()将返回一个新数组。