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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
完美解决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日历[测试通过]
2008/03/27 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
重定向实现代码
2006/11/20 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
python使用7z解压apk包的方法
2015/04/18 Python
Python实现身份证号码解析
2015/09/01 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python爬虫实现获取下一页代码
2020/03/13 Python
python time()的实例用法
2020/11/03 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
小学推普周活动总结
2015/05/07 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
python实现简单倒计时功能
2021/04/21 Python
Python使用openpyxl批量处理数据
2021/06/23 Python