开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第33天，点击查看活动详情
map vs forEach
经常在处理数组遍历的时候会用到2个方法 map 和 forEach ，那么它们之间有什么区别？
在MDN 上对他们的定义：
- forEach() — 为每个数组元素执行一次提供的函数。
- map() — 创建一个新数组，其中包含对调用数组中的每个元素调用提供的函数的结果。
所以说，forEach 应该是没有返回任何东西。它只是数组中每个元素的调用提供了一个函数。但是map 不同，它为每个元素调用提供函数且返回了一个大小相同的新数组。
// 使用 forEach
let arr=[1,2,3,4,5]
arr.forEach((val,index)=>{
return arr[index]=val*2
});
console.log(arr);
// 使用 map
let arr1=[1,2,3,4,5]
let mapResult= arr1.map((val)=>{
return val*2
})
console.log(mapResult);
观察上面的Demo ，执行出来的结果是一样的，但上面的区别也是显而易见的：
- forEach 方法是没有返回值，map 是返回了一个新的数组。
- map 产生新的数组，不会影响原始的数组。所以在函数式编程模式下更加推荐使用 map 进行遍历数组。
各自使用场景
- forEach 更适合用在当你只是对数组中元素读取而不改变数组中的数据。比如数组中取值然后保存到数据库或者进行其他操作。
- 当需要更改数据时可以使用map，因它速度会更快且会返回新的数组。最重要的是在 ES6特性中它还支持链式函数操作。比如遍历后进行过滤 filter或 reduce。比如：
let arr1=[1,2,3,4,5]
let mapResult= arr1.map((val)=>{
return val*2
}).filter(num=>num>5);
总结
- 可以使用 forEach() 的集合都是可以使用 map()。但是可以使用 map() 的集合不一定能够使用 forEach()。
- 因为 map() 会返回一个新的数组，所以使用它时会再申请内存用于存储返回值。forEach 是返回 undefine，没有申请内存。
- forEach 是允许回调函数改变当前的值，map 是返回一个新的数组。
- 中断循环的操作，map 可以使用 break 中断，可以使用 return 返回最外层函数；foreach 中不能使用 break 和 return都无法中断循环或返回最外层函数。
像遍历的方法还有 for in 和 for of 。
- for in 可以遍历 map 集合 和 数组下标，注意不是遍历一个数组
- for of 遍历 数组，字符串，map ，sets 等 iteration 的结构
