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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
一分钟理解js闭包
May 04 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
详解Puppeteer 入门教程
May 09 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
js消除图片小游戏代码
Dec 11 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
Zerg建筑一览
2020/03/14 星际争霸
php的扩展写法总结
2019/05/14 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
python抓取网页中链接的静态图片
2018/01/29 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
pytorch实现查看当前学习率
2020/06/24 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
服装机修工岗位职责
2013/12/26 职场文书
大学社团活动总结
2014/04/26 职场文书
质量提升方案
2014/06/16 职场文书
HR求职自荐信范文
2014/06/21 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫