JavaScript中Map和ForEach的区别

charles_paul 发布于2019-08-22 14:48 / 821人阅读

摘要：示例下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用和来达到目的。注意，是不会返回有意义的值的。允许更改原始数组的元素。自从年双十一正式上线，累计处理了亿错误事件，得到了金山软件等众多知名用户的认可。

译者按： 惯用Haskell的我更爱map。

原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForEach in JavaScript?

译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

如果你已经有使用JavaScript的经验，你可能已经知道这两个看似相同的方法：Array.prototype.map()和Array.prototype.forEach()。

那么，它们到底有什么区别呢？

定义

我们首先来看一看MDN上对Map和ForEach的定义：

forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。

map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。

示例

下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用map和forEach来达到目的。

let arr = [1, 2, 3, 4, 5];

ForEach

注意，forEach是不会返回有意义的值的。
我们在回调函数中直接修改arr的值。

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]

执行速度对比

jsPref是一个非常好的网站用来比较不同的JavaScript函数的执行速度。

这里是forEach()和map()的测试结果：

可以看到，在我的电脑上forEach()的执行速度比map()慢了70%。每个人的浏览器的执行结果会不一样。你可以使用下面的链接来测试一下: Map vs. forEach - jsPref。

JavaScript太灵(gui)活(yi)了，出了BUG你也不知道，不妨接入Fundebug线上实时监控。

函数式角度的理解

如果你习惯使用函数式编程，那么肯定喜欢使用map()。

哪个更好呢？

取决于你想要做什么。

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 -- 比如存入数据库或则打印出来。

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

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(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]

我们首先使用map将每一个元素乘以2，然后紧接着筛选出那些大于5的元素。最终结果赋值给arr2。

核心要点

能用forEach()做到的，map()同样可以。反过来也是如此。

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

forEach()允许callback更改原始数组的元素。map()返回新的数组。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用！

转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/02/05/map_vs_foreach/

服务器托管专线服务 php和javascript的区别 javascript和jquery的区别 jquery和javascript的区别 javascript和php的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92880.html

JavaScript中的数组遍历forEach()与map()的区别

摘要：加粗文字不管是还是在下都不兼容不兼容的情况下在上没有这两个方法那么需要我们自己封装一个都兼容的方法，代码如下遍历数组回调函数上下文下自己编写回调函数执行的逻辑遍历数组回调函数上下文下自己编写回调函数执行的逻辑原理：高级浏览器支持forEach方法语法：forEach和map都支持2个参数：一个是回调函数（item,index,list）和上下文； forEach:用来遍历数组中...

Mr_zhang 2019-08-23 15:42 评论0 收藏0
JS 数组循环遍历方法的对比

摘要：循环方法方法不改变原数组方法会给原数组中的每个元素都按顺序调用一次函数。筛选出过滤出数组中符合条件的项组成新数组代码方法方法为数组中的每个元素执行一次函数，直到它找到一个使返回表示可转换为布尔值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 发展至今已经发展出多种数组的循环遍...

BlackFlagBin 2019-08-26 11:31 评论0 收藏0
JavaScript 之数组遍历（迭代）方法介绍

摘要：中一共有五种数组遍历迭代方法，它们都会对数组中每个元素执行一些业务，且都不会修改原数组，这些方法包括如果该函数任意一项返回，则返回，如果全部返回则最终返回如果该函数每一项都返回，则返回，否则返回会返回一个新数组，该数组是由满足条件的任意项组 ES5中一共有五种数组遍历（迭代）方法，它们都会对数组中每个元素执行一些业务，且都不会修改原数组，这些方法包括： 1、some() 如果该函数任意...

Pikachu 2019-08-23 18:33 评论0 收藏0
JavaScript es5中的Array常用的forEach、map、filter、indexOf

摘要：的的区别和相同之处就是数组的遍历循环，回调支持三个参数，第个是遍历的数组内容第个是对应的数组索引，第个是数组本身他是没有返回值得，不需要再下面，更进一步，除了接受一个必须的回调函数参数，还可以接受一个可选的上下文参数改变回调函数里面 Array的forEach、map的区别和相同之处 forEach 1、 forEach就是数组的遍历、循环，回调支持三个参数，第1个是遍历的数组内容；...

xuexiangjys 2019-08-20 15:37 评论0 收藏0
EventEmitter：从命令式 JavaScript class 到声明函数式的华丽转身

摘要：典型和改造挑战了解事件发布订阅系统实现思想，我们来看一段简单且典型的基础实现上面代码，实现了一个类我们维护一个类型的，对不同事件的所有回调函数进行维护。方法对指定事件进行回调函数存储方法对指定的触发事件，逐个执行其回调函数。 showImg(https://segmentfault.com/img/remote/1460000014287200); 新书终于截稿，今天稍有空闲，为大家奉...

hsluoyz 2019-08-22 16:11 评论0 收藏0