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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
文本链接逐个出现的js脚本
Dec 12 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
面包屑导航详解
Dec 07 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python关键字and和or用法实例
2015/05/28 Python
名片管理系统python版
2018/01/11 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
社区包粽子活动方案
2014/01/21 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
培训自我鉴定
2014/01/31 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript