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 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
Prototype Object对象 学习
Jul 12 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
javascript实现放大镜功能
Dec 09 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
php生成略缩图代码
2012/07/16 PHP
深入php self与$this的详解
2013/06/08 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
手写一个python迭代器过程详解
2019/08/27 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
什么是Python变量作用域
2020/06/03 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Python读写Excel表格的方法
2021/03/02 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
员工生日会策划方案
2014/06/14 职场文书
节能环保演讲稿
2014/08/28 职场文书
办公经费申请报告
2015/05/15 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
python爬取豆瓣电影TOP250数据
2021/05/23 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
用Python实现屏幕截图详解
2022/01/22 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL