日期：2020 年 8 月 13 日
map 与 forEach 的比较
基本定义及使用
定义
map
map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值
forEach
forEach() 方法对数组的每个元素执行一次给定的函数
语法
// map 用法
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
// forEach 用法
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
异同对比
相同点
都是用来遍历一个数组并对数组的每一项执行给定的函数
不同点
- 从它们各自的定义中即可发现数组调用 map 方法之后会返回一个新的数组，而数组调用 forEach 之后是没有返回值，即一定返回 undefined
注意：map 返回的新数组的各项就是原数组每一项调用 callback 之后的返回值，所以这也要求 map 中的 callback 一定要有返回值，同时，map 会返回一个新数组也决定了 map 之后可以继续进行链式操作，而 forEach 因为没有返回值，所以后面就不能再接其他操作了
- 它们的使用场景不同，map 适用于需要更改数组的场景，而 forEach 更适用于打印数组内容，并且 forEach 除了抛出异常以外，没有办法中止或跳出循环，若要提前结束循环，则可以使用 for 循环、for···of、for···in、every、some、find、findIndex，对于需要判断一个数组是否满足条件并返回 true 或 false 的场景可以用 every() 或者 some()，具体使用场景查看 MDN-forEach
常见误区
另外，对于网上的一些说 map 不修改原数组，返回新数组，而 forEach 会修改原数组的说法，在下也实在不敢苟同。实际上，这两个方法都不会修改原数组，但是当数组的元素为一个引用类型的元素时，如果我们对其进行了修改，那么原数组是会改变的，看两个例子：
当操作的数组元素为基本数据类型时：
修改基础类型数组元素
当操作的数组元素为引用类型时：
修改引用类型数组元素
这是因为 map 和 forEach 的 callback 在操作数组元素时实际上是下面这样操作的：callback.call([thisArg], this[index], index, this)，当数组元素为引用类型时， this[index] 取到的实际只是一个指向对应元素的地址，这种情况下再进行修改操作，修改的是堆中的对象的内容，那当我们再次去读取原数组中内容时，读到这个引用类型的元素时，我们拿到的还是那个地址，不过它指向的堆中的内容却已经变了
网友评论