foreach和map,【】for、forEach、map数组遍历性能比较
foreach和map,【】for、forEach、map数组遍历性能比较详细介绍
本文目录一览： foreach和map的区别是什么？
foreach和map的3个不同点：
1、map速度比foreach快。
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组。
3、map因为返回数组所以可以链式操作，foreach不能。
foreach和map是Javascript常用到的指令。
Javascript产生背景：
JavaScript最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”。因此语法上有类似之处，一些名称和命名规范也借自Java。
但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。微软同时期也推出了JScript来迎战JavaScript的脚本语言。
发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript），两者都属于ECMAScript的实现。
尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。
1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程（Node.js）。
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
foreach和map的区别
forEach()没有返回值。map()有返回值，可以return出来。forEach()方法不会返回执行结果，而是undefined，也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
foreach和map的区别是什么 1.foreEach()方法:
针对每一个元素执行提供的函数。
map()方法:
创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。
2.forEach()可以做到的东西，map()也同样可以。反过来也是如此。
map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
forEach()允许callback更改原始数组的元素。map()返回新的数组。
数组方法map和forEach的使用方法
map和forEach的使用方法都是循环遍历数组中的每一项，每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input。匿名函数中的this都是指window，只能遍历数组。
map() 方法按照原数组元素的顺序进行遍历处理，会返回一个新的数组，当map每次执行的方法有返回值即为新数组对应的元素的值，无返回值则新数组对应的元素值为undefined。map可以接收三个参数map(item, index, arr)分别为当前元素值、当前元素的索引和原数组对象。
forEach()用于调用数组的每个元素，并将元素传递给回调函数，返回undefined。实际上forEach就相当于一个for循环，forEach同样也是接收三个参数，跟map一样。对于空数组是不会执行回调函数的。
相同点：
一、都是循环遍历数组；
二、都接收三个参数：每一项、索引、原数组
三、执行匿名函数中的this指向window
不同点
map()会返回一个新数组，存在映射关系，不会对空数组进行检测；
forEach() 只是按顺序把数组中的元素传递给匿名函数使用，执行后返回undefine，会对空数组进行检测不会执行匿名函数。
filter只有在回调函数执行前传入的数组元素才有效，在回调函数开始执行后才添加的元素将被忽略，而在回调函数开始执行到最后一个元素这一期间，数组元素被删除或者被更改的，将以回调函数访问到该元素的时间为准，被删除的元素将被忽略。新的数组只包含满足条件的项。
那从性能方面如何去选择呢？
肯定是 for > forEach > map，map 会返回一个等长数组，forEach 不会，所以 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。
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的今天，尽量不要忽略任何一个 ~ 提示。
for in，for of， for，forEach，map的区别
最近一直有在面试，各种准备，博客，慕课网都成了常客，看了那么久那么认真，都把自己给感动了，然而呢，一道题几家公司几家问，知道就是说不出来，网上一看很多，说的也很对，看完是懂了，但是没有自己去整理去记忆，还是会被一次次问的语无伦次，所以就从这篇开始吧。 这道题有两家公司都有问到，表现的都不理想，从一开始的答不出来，到后边的答不到重点，进步很小，惭愧呀，话不多说，开始学习。
for...in区别:
for...of用来遍历数据，例如数组中的值，但是也可以遍历字符串，支持Map和Set对象的遍历，避免了所有for...in的弊端，与forEach相比可以正确响应break，continue，return语句。
forEach一般只能适用于数组,功能是从头到尾把数组遍历一遍，可以有三个参数，后两个可以不写
讲真基础还是需要多练习，听说forEach是for循环的加强版，就想自己去实现下，结果想的有些复杂了还没做出来，于是百度了下，居然那么简单。
和forEach相比，使用方法一样有三个参数，map只能对元素进行加工处理，产生一个新的数组对象。
filter对原数组进行过滤筛选，生成新的数组,使用和map样有三个参数。如果对空数组进行筛选，会返回undefined。filter不会改变原数组。
for常规语句遍历，可循环数字,字符串，数组
前端面试题，map,forEach,for循环，三个都能遍历，啥区别？
虽说都能遍历，但是呢，效率完全不同了吧。所以，这道题主要问的是算法方向的问题！
这个区别就是她们的遍历过程不一样
for遍历对象自身的和继承的可枚举的属性，也就是说会包括那些原型链上的属性。如果想要仅迭代自身的属性，那么在使用 for...in
forEach
只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)
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要兼容低于版本设备的话还是算了
JS的forEach和map方法的区别，还有一个$each
forEach()和map()两个方法都是ECMA5中Array引进的新方法，主要作用是对数组的每个元素执行一次提供的函数，但是它们之间还是有区别的。jQuery也有一个方法$.each(),长得和forEach()有点像，功能也类似。但是从本质上还是有很大的区别的，那么我们探探究竟。
一、forEach和map语法
语法：
//forEacharray.forEach(callback(currentValue, index, array){ //do something}, this) //或者array.forEach(callback(currentValue, index, array){ //do something}) //map:var new_array = arr.map(callback[, thisArg]) //$.each()$(selector).each(function(index,element)) //注意参数的顺序callback: 为数组中每个元素执行的函数,该函数接收三个参数，
参数一：当前数组中元素；参数二：索引； 参数三：当前数组。
this：可选，执行会掉时候，this的指向。
二、区别
2.1、forEach()返回值是undefined，不可以链式调用。
2.2、map()返回一个新数组，原数组不会改变。
2.3、没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();
2.4、$.each()方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。
参考如下：假设有一个数组，每个元素是一个人。面前站了一排人。foreach就是按顺序一个一个跟他们做点什么，具体做什么，随便:people.forEach(function(dude){dude.pickUpSoap();});map就是手里拿一个盒子（一个新的数组），一个一个叫他们把钱包扔进去。结束的时候获得了一个新的数组，里面是大家的钱包，钱包的顺序和人的顺序一一对应。varwallets=people.map(function(dude){returndude.wallet;});reduce就是拿着钱包，一个一个数过去看里面有多少钱啊？每检查一个，就和前面的总和加一起来。这样结束的时候就知道大家总共有多少钱了。vartotalMoney=wallets.reduce(function(countedMoney,wallet){returncountedMoney+wallet.money;},0);
forEach()和map()两个方法都是ECMA5中Array引进的新方法，主要作用是对数组的每个元素执行一次提供的函数，但是它们之间还是有区别的。jQuery也有一个方法$.each(),长得和forEach()有点像，功能也类似。但是从本质上还是有很大的区别的，那么我们探探究竟。
一、forEach和map语法
语法：
//forEach
array.forEach(callback(currentValue, index, array){
//do something
}, this)
//或者
array.forEach(callback(currentValue, index, array){
//do something
})
//map:
var new_array = arr.map(callback[, thisArg])
//$.each()
$(selector).each(function(index,element)) //注意参数的顺序
callback: 为数组中每个元素执行的函数,该函数接收三个参数，
参数一：当前数组中元素；参数二：索引； 参数三：当前数组。
this：可选，执行会掉时候，this的指向。
二、区别
2.1、forEach()返回值是undefined，不可以链式调用。
2.2、map()返回一个新数组，原数组不会改变。
2.3、没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();
2.4、$.each()方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。
三、经典例子
3.1 在使用forEach()时候，如果数组在迭代的视乎被修改，
则其他元素会被跳过。因为 forEach()不会在迭代之前创建数组的副本。
3.2反转字符串
var str = '12345';
Array.prototype.map.call(str, function(x) { //同时利用了call()方法
return x;
}).reverse().join('');
3.3一个笔试题。
1
["1", "2", "3"].map(parseInt); //结果 [1, NaN, NaN]
如果想得到[1, 2,3]应该这么做
function returnInt(element){
return parseInt(element,10);
}
["1", "2", "3"].map(returnInt);
这主要是因为 parseInt()默认有两个参数，第二个参数是进制数。当parsrInt没有传入参数的时候，而map()中的回调函数时候，会给它传三个参数，第二个参数就是索引，明显不正确，所以返回NaN了。
3.4....
四、兼容性
forEach()和map()是ECMA5新引入的，可能在标准的其他实现中不存在，在使用前可以要Ployfill一下。
具体网上很多吧，更多的是在ie9以下，如果你的项目无视这些，那么你可以不care。