您的当前位置:首页正文

详细介绍在JS中Map和ForEach的区别

2023-11-30 来源:博科教育
本篇文章给大家详细分析了JS中Map和ForEach的区别以及用法上的不同之处,对此有兴趣的朋友可以学习下吧。

如果你已经有使用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来达到目的。

ForEach

注意,forEach是不会返回有意义的值的。

我们在回调函数中直接修改arr的值。

执行结果如下:

Map

执行结果如下:

执行速度对比

jsPref是一个非常好的网站用来比较不同的JavaScript函数的执行速度。

这里是forEach()和map()的测试结果:

可以看到,在我到电脑上forEach()的执行速度比map()慢了70%。每个人的浏览器的执行结果会不一样。你可以使用下面的链接来测试一下: Map vs. forEach - jsPref。

JavaScript太灵(gui)活(yi)了,出了BUG你也不知道,不妨接入Fundebug线上实时监控。

函数式角度的理解

如果你习惯使用函数是编程,那么肯定喜欢使用map()。因为forEach()会改变原始的数组的值,而map()会返回一个全新的数组,原本的数组不受到影响。

哪个更好呢?

取决于你想要做什么。

forEach适合于你并不打算改变数据的时候,而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

map()适用于你要改变数据值的时候。不仅仅在于它更快,而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

我们首先使用map将每一个元素乘以2,然后紧接着筛选出那些大于5的元素。最终结果赋值给arr2。

核心要点

能用forEach()做到的,map()同样可以。反过来也是如此。

map()会分配内存空间存储新数组并返回,forEach()不会返回数据。

forEach()允许callback更改原始数组的元素。map()返回新的数组。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

jQuery+ajax读取json并排序方法详解

js获取ModelAndView需要哪些步骤

JS实现左右列表互相调换功能

小编还为您整理了以下内容,可能对您也有帮助:

foreach和map的区别

forEach()没有返回值。map()有返回值,可以return出来。forEach()方法不会返回执行结果,而是undefined,也就是说,forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

foreach和map的区别是什么

1.foreEach()方法:

针对每一个元素执行提供的函数。

map()方法:

创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来。

2.forEach()可以做到的东西,map()也同样可以。反过来也是如此。

map()会分配内存空间存储新数组并返回,forEach()不会返回数据。

forEach()允许callback更改原始数组的元素。map()返回新的数组。

map和forEach的区别和用法

相同:forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item-当前项,index当前项索引值,array原数组;
不同:
map
1.map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
2.map方法不会对空数组进行检测,若arr为空数组,则map方法返回的也是一个空数组,map方法不会改变原始数组。
3.浏览器支持:chrome、Safari1.5+、opera都支持,IE9+

运行结果

forEach
1.forEach方法用来调用数组的每个元素,将元素传给回调函数
2.forEach对于空数组是不会调用回调函数的,即没有返回值。

运行结果

性能上来说for>forEach>map

但是选用方法时不用太过考虑性能,一般简单遍历用forEach,对会产生有规律的变化的新数组时用map

map和forEach的区别和用法

相同:forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item-当前项,index当前项索引值,array原数组;
不同:
map
1.map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
2.map方法不会对空数组进行检测,若arr为空数组,则map方法返回的也是一个空数组,map方法不会改变原始数组。
3.浏览器支持:chrome、Safari1.5+、opera都支持,IE9+

运行结果

forEach
1.forEach方法用来调用数组的每个元素,将元素传给回调函数
2.forEach对于空数组是不会调用回调函数的,即没有返回值。

运行结果

性能上来说for>forEach>map

但是选用方法时不用太过考虑性能,一般简单遍历用forEach,对会产生有规律的变化的新数组时用map

map()和forEach()

forEach()方法中的function回调支持三个参数,第一个是遍历的内容,第二个是索引,第三个是数组本身。即

这里的map是“映射”的意思,基本用法跟forEach类似,但是可以把原数组映射成一个新的数组。比如:

支持return返回值,return的是啥,相当于把数组的这一项变成啥。

1、map速度比forEach快。
2、map会返回一个新数组,不会对原数组产生影响;而forEach不会产生新的数组,只会返回endefined。
3、map因为返回数组,所以可以进行链式操作。
4、map里可以用return,forEach不能;forEach不能用break。

map()和forEach()

forEach()方法中的function回调支持三个参数,第一个是遍历的内容,第二个是索引,第三个是数组本身。即

这里的map是“映射”的意思,基本用法跟forEach类似,但是可以把原数组映射成一个新的数组。比如:

支持return返回值,return的是啥,相当于把数组的这一项变成啥。

1、map速度比forEach快。
2、map会返回一个新数组,不会对原数组产生影响;而forEach不会产生新的数组,只会返回endefined。
3、map因为返回数组,所以可以进行链式操作。
4、map里可以用return,forEach不能;forEach不能用break。

for、forEach、map的性能对比

说明一下:性能的比较实际上与环境使用的V8版本相关,这也是为什么map方法在chrome里比在Node中慢10倍,有人测试过(在chrome 62 和 Node.js v9.1.0环境下):for循环比forEach快1倍,forEach比map快20%左右。

for :for循环没有额外的函数调用栈和上下文,所以它的实现最为简单。

forEach :对于forEach来说,它的函数签名是这样的

其中包含了参数和上下文,这回影响它的性能。

map :map最慢的原因是因为map会返回一个新的数组,数组的创建和赋值会导致分配内存空间,因此会带来较大的性能开销。如果将 map 嵌套在一个循环中,便会带来更多不必要的内存消耗。

简单来说:

当你的循环不需要返回值(也不应该返回),不需要改变数据的时候(虽然允许callback改变),比如,你只是想借助这次遍历去做一些事情,那么就可以选择 forEach ;

当你需要改变数据值,或者需要链式调用的时候,那么就使用 map ;

虽然map确实可以实现某些你想要的操作,比如:

当它其实更适合 for 或 forEach 。

正如MDN中所描述的那样 Array.prototype.map() :

所以在有eslint的今天,尽量不要忽略任何一个 ~ 提示。

jquery中.map与each的区别?

一、功能不同

1、map:用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

2、each:为每个匹配元素规定要运行的函数。

二、传递参数不同

1、map:会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。 

2、each: 会为函数传入两个参数:其一是选择器的 index 位置。其二是当前的元素。

三、返回值不同

1、map:返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。

2、each:返回 false 可用于及早停止循环。

参考资料来源:百度百科-each

参考资料来源:百度百科-Map

jquery中.map与each的区别?

一、功能不同

1、map:用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

2、each:为每个匹配元素规定要运行的函数。

二、传递参数不同

1、map:会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。 

2、each: 会为函数传入两个参数:其一是选择器的 index 位置。其二是当前的元素。

三、返回值不同

1、map:返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。

2、each:返回 false 可用于及早停止循环。

参考资料来源:百度百科-each

参考资料来源:百度百科-Map

【】for、forEach、map数组遍历性能比较

常用数组遍历方式有很多,最经典的for循环:    for(var i=0;i<arr.length;i++){}

再者有了for...in   for(var i in arr){}

forEach    arr.forEach(function(i){})

map   arr.map(function(i){})

然后ES6有了更为方便的for...of              for(let i of arr){}

因为for...in语法是第一个能够迭代对象键的javaScript语句,循环对象键盘({})与在数组(【】)上循环不一样,引擎会执行一些额外的工作来跟踪已经迭代的属性。

因此可以大致得出以下几点:

1.数据量大时,遍历性能的差距尤为明显;

2.for系遍历总体性能好于forEach、map等数组方法

3.你大爷毕竟还是你大爷,性能最佳的还是经典的for循环遍历

4.forEach性能优于map

5.for...of要兼容低于版本设备的话还是算了

如何形象地解释 JavaScript 中 map,foreach,reduce 间的区别

foreach是遍历,对集合中每个对象做一个操作,但是不返回值。

map是映射,对数组中每个对象做一个操作,返回一个值,例如

[1,2,3].map(x=>x*x)得到[1,4,9],就是对每个对象得到它的平方数。与forEach的区别是这里每个元素都返回一个值,合起来返回一个数组。

rece 是对2个相邻的元素做一个操作,返回一个元素,然后将它作为下一次操作的第一个元素,在原数组中取下一个元素再对这两个元素做下一轮操作,最终操作完只返回一个元素。

如[1,2,3].rece((a,b)=>a+b) 得到6,过程是1+2=3 ,3+3=6

博科教育还为您提供以下相关内容希望对您有帮助:

foreach和map的区别是什么?

foreach和map的3个不同点:1、map速度比foreach快。2、map会返回一个新数组,不对原数组产生影响,foreach不会产生新数组。3、map因为返回数组所以可以链式操作,foreach不能。foreach和map是Javascript常用到的指令。Javascr...

JS的forEach和map方法的区别,还有一个$each

2.1、forEach()返回值是undefined,不可以链式调用。2.2、map()返回一个新数组,原数组不会改变。2.3、没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的...

map和forEach的区别和用法

相同:forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item-当前项,index当前项索引值,array原数组; 不同: map 1.map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。 2....

js中的 map,foreach,reduce 之间有什么区别么

map:对数组中每一个元素都运行函数, 返回由每次函数执行的结果组成的数组。果你想对数据里的每一个元素进行处理,可以采用forEach来替换 for循环,和forEach不同的是,它最终会返回一个新的数组,数组的元素是每次处理先前...

map()和forEach()

1、map速度比forEach快。2、map会返回一个新数组,不会对原数组产生影响;而forEach不会产生新的数组,只会返回endefined。3、map因为返回数组,所以可以进行链式操作。4、map里可以用return,forEach不能;forEach不能用...

for、forEach、map的性能对比

说明一下:性能的比较实际上与环境使用的V8版本相关,这也是为什么map方法在chrome里比在Node中慢10倍,有人测试过(在chrome 62 和 Node.js v9.1.0环境下):for循环比forEach快1倍,forEach比map快20%左右。for :...

map和foreach区别

返回值不同、对原数组的影响不同。根据查询PHP中文网得知:1、返回值不同:map方法会分配内存空间存储新数组并返回,而forEach方法不会返回数据。2、对原数组的影响不同:map方法会得到一个新的数组并返回,不会改变原数组...

原生JS forEach和map遍历的区别以及兼容写法

forEach 没有返回值,map 有返回值。if ( !Array.prototype.forEach ) {Array.prototype.forEach = function forEach( callback, thisArg ) {var T, k;if ( this == null ) {throw new TypeError( "this is ...

如何形象地解释 JavaScript 中 map,foreach,reduce 间的区别

map是映射,对数组中每个对象做一个操作,返回一个值,例如 [1,2,3].map(x=&gt;x*x)得到[1,4,9],就是对每个对象得到它的平方数。与forEach的区别是这里每个元素都返回一个值,合起来返回一个数组。reduce 是对2个...

如何形象地解释 JavaScript 中 map,foreach,reduce 间的区别

foreEach是指遍历一个集合 reduce是指通过遍历整个集合把一个集合归约(归纳)为单个结果 map - reduce是一种常见的数据流处理模型 举例说明:某个游戏中有N个的战斗单元的集合(如士兵,坦克,战机等等)现在通过map把战斗...

Top