JavaScript中Map和ForEach的区别

译者按: 惯用Haskell的我更爱map。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

如果你已经有使用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()方法会得到一个新的数组并返回。

示例

下方提供了一个数组,如果我们想将其中的每一个元素翻倍,我们可以使用mapforEach来达到目的。

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()的测试结果:

可以看到,在我到电脑上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()返回新的数组。
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2018/02/05/map_vs_foreach/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright * { box-sizing: border-box; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

[你必须知道的.NET] 第四回:后来居上:class和struct

本文将介绍以下内容: • 面向对象基本概念 • 类和结构体简介 • 引用类型和值类型区别 1. 引言 提起class和struct,我们首先的感觉是语法几乎相...

18010
来自专栏编程

Go中defer的5 个坑-第一部分

首发于:https://studygolang.com/articles/12061 Go 中 defer 的 5 个坑 - 第一部分 通过本节的学习以避免掉入...

2085
来自专栏Petrichor的专栏

Google检索技巧

852
来自专栏小鄧子的技术博客专栏

为什么android API 中有很多对象的创建都是使用new关键字

首先,谢邀。 其次,是怎么找到我知乎账号的,我隐藏的这么深(脸红了) 最后,加入了自己的总结概括,让然也可以当成读书笔记来看。

603
来自专栏程序员互动联盟

【专业技术】如何写出优美的C 代码?

面向对象的语言更接近人的思维方式,而且在很大程度上降低了代码的复杂性,同时提高了代码的可读性和可维护性,传统的 C 代码同样可以设计出比较易读,易维护,复杂度较...

3259
来自专栏Flutter入门到实战

封装工厂类创建BottomNavigationBar的addItem

●  工厂方法模式的具体工厂类只能创建一个具体产品类的实例,而抽象工厂模式可以创建多个。

712
来自专栏java一日一条

Java实现单例的难点

有简单又高效的方法可以实现单例模式,但没有一种方式能在任何情况下都确保单例的完整性。

422
来自专栏IT派

Python3.7中一种懒加载的方式

Python3.7在模块上也添加了__getattr__()和__dir__()两个方法。这个新特性让我们能够实现一些有趣的事情。例如,通过定义__dir__方...

1010
来自专栏FreeBuf

Dance In Heap(三):一些堆利用的方法(中)

0x00 前面的话 在前一篇堆的利用方法里面,我们简单的提了一下UAF,并主要对从 bin 中释放 chunk 的操作,即 unlink 宏、unsortedb...

2337
来自专栏web前端

JavaScript之对数组中元素进行增删改

JavaScript中数据类型无非是:简单类型+复杂类型,什么是简单什么又是复杂。从电脑物理存储上讲,简单就是所见即所得,你看见什么,电脑里面存的就只是什么,并...

17910

扫码关注云+社区