JavaScript中Map和ForEach的区别

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

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

如果你已经有使用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)。到底有什么区别呢？`forEach()`方法不会返回执行结果，而是`undefined`。也就是说，`forEach()`会修改原来的数组。而`map()`方法会得到一个新的数组并返回。 ### 示例下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用`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()`会改变原始的数组的值，而`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以及本文地址：
https://blog.fundebug.com/2018/02/05/map_vs_foreach/

本文链接：https://blog.csdn.net/Fundebug/article/details/79367730

智能推荐

git切换分支报错，不管什么标题名字，都报非法字符，所以就不起名字了。

切换分支的时候，报了标题这么个错误，error: ”xxx did not match any file(s) known to git. 看见不能切换分支，我首先 git status 查看了一下当前状态，如下图然后，就会发现，其实我的这个错误非常明显，就是在我的 beat 分支下有文件修改，所以切换不了。ok，解决方法： 1. 如果修改的这些文件没什么用，完全可以删除。（我这儿的...

Oracle分析函数之LEAD和LAG实际应用

Oracle分析函数之LEAD和LAG实际应用在前几天的工作中按照客户的需求，需要对客户信息进行数据分析，即某人存在多个状态的账号，将客户信息账号状态分析出结果，和客户确认汇报，根据保留规则，保留唯一账号，以保证程序可用性。起初，根据聚合函数进行查询分析，需要写一大串的SQL，即不美观又复杂，很容易产生错误。后续想到Oracle分析函数中的lead和lag，SQL简洁了很多且容易产生报告数据。 ...

小知识积累（不断更新中）

判断变量的类型（数组，对象） tyopof：不推荐，因为无法区别数组与对象，数组是对象的子对象 instanceof：可以使用还可以用来判断是否属于函数 Object.prototype.toString.call()：最兼容，推荐使用定时器的执行顺序或机制 js是单线程的，浏览器遇到setTimeout或者setInterval会把定时器推入浏览器的待执行事件队列里面但是不执行，先执行完当前...

ROS自学实践(6)：ROS进行激光SLAM建图——gmapping

本节主要记录运行ROS自带的SLAM建模包gmapping方法，为后续理解这些代码，建立自己的SLAM算法打下基础。基于粒子滤波算法二维栅格地图需要里程计信息 1.通过命令行安装gmapping包 2.配置gmapping节点 3.运行gazebo模型及gmapping节点 4.打开rviz 添加laserscan、map、robotmodel模型 5.移动小车，建立模型 6.保存当前地图 ...

face-api.js中加入MTCNN：进一步支持使用JS实时进行人脸跟踪和识别

如果你现在正在阅读这篇文章，那么你可能已经阅读了我的介绍文章（JS使用者福音：在浏览器中运行人脸识别）或者之前使用过face-api.js。如果你还没有听说过face-api.js，我建议你先阅读介绍文章再回来阅读本文。和往常一样，本文中为你准备了一个代码示例。我们将解析一个小的应用程序，这个程序将在浏览器中访问摄像头图像执行实时人脸检测和人脸识别，让我们开始吧！使用face-api.js进行...