js 中数组方法 map 与 forEach 的比较

最新推荐文章于 2025-08-24 11:54:05 发布

原创最新推荐文章于 2025-08-24 11:54:05 发布 · 938 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #数据结构 #javascript

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文详细对比了JavaScript中的map和forEach方法。map方法创建一个新数组，其元素是原数组元素经函数处理后的结果；forEach则对数组每个元素执行给定函数，但不返回新数组。map适用于需要更改或转换数组的场景，而forEach更适合于数组内容的打印或简单的遍历操作。

日期：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] 取到的实际只是一个指向对应元素的地址，这种情况下再进行修改操作，修改的是堆中的对象的内容，那当我们再次去读取原数组中内容时，读到这个引用类型的元素时，我们拿到的还是那个地址，不过它指向的堆中的内容却已经变了