JS中Map和ForEach的区别


Posted in Javascript onFebruary 05, 2018

如果你已经有使用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()的测试结果:

JS中Map和ForEach的区别

可以看到,在我到电脑上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()返回新的数组。

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
完美解决axios跨域请求出错的问题
Feb 05 #Javascript
vue 页面加载进度条组件实例
Feb 05 #Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 #Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 #Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 #Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 #Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 #Javascript
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php网页病毒清除类
2014/12/08 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python批量转换文件编码格式
2015/05/17 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python有参函数使用代码实例
2020/01/06 Python
python实现简单飞行棋
2020/02/06 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
质检员岗位职责
2013/12/17 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
校庆活动方案
2014/03/31 职场文书
信用卡工资证明范本
2014/10/17 职场文书
毕业设计论文评语
2014/12/31 职场文书
企业战略合作意向书
2015/05/08 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技