背景
在前端的工作中不可避免的会用到 遍历、循环、迭代等情况，对于常用的for、foreach、map几乎每天是经常用到，那么他们到底有什么区别呢，什么情况下用什么方式会更对呢，尝试探寻一番......
一、基础使用
forEach
功能: 循环遍历数组中的每一项,只能遍历数组
写法:
//数组对象.forEach(function(参数变量名1,参数变量名2，参数变量名3)){
// 做一些操作,forEach是没有返回值,返回值为undefined
//}, this)
arr.forEach((self,index,arr) =>{},this)
self： 数组当前遍历的元素，默认从左往右依次获取数组元素。
index： 数组当前元素的索引，第一个元素索引为0，依次类推。
arr： 当前遍历的数组。
this： 回调函数中this指向。
返回值:undefined,并且总是返回undefined值,并且不可链式调用
示例参考：
let arr = [1, 2, 3, 4];let Dog = { name: '一只汪'};arr.forEach(function (self, index, arr) { console.log(`当前元素为${self}索引为${index},属于数组${arr}`); console.log(this.name+='真可爱');}, Dog)
map
**功能:**循环遍历数组中的每一项,也只能遍历数组
写法
数组对象.map(callback(参数名1,参数名2,参数名3){
// 对原数组做一些操作
}
arr.map((self,index,arr)=>{
})
map使用方式与forEach类似,callback回调函数接收的参数意义与forEach一致
必须要有返回值,如果不给return,它会返回一个undefined
return 的返回值是什么,相当于给这个新增的数组添加新的值,但它不会影响原数组,只是将原来的数组拷贝了一份,把拷贝的数组项进行更改,支持链式调用
使用场景：
场景1: 拷贝原数组,改变一些东西,假定有一个数组(A),将A数组中的值以双倍的数值放到B数组中
var numbersA = [1,2,3,4,5,6];
var numbersB = []
var numbersC = numbersA.map(function(numberA,index,originArrs){
return numbersB.push(numberA*2);
}
console.log(numbersA); // [1,2,3,4,5,6]
console.log(numbersB);// []
console.log(numbersC);// [4, 8, 12, 16, 20, 24]
console.log(numbersC==numbersA)
**场景2:**在一个数组对象中拿到数组中对象的属性
/* 假定有一个对象数组(arrsA),将arrsA数组中对象某个属性的值存储到B数组中*/
var arrsA = [
{name:"苹果",price:8888,city:"旧金山"},
{name:"金立",price:1100,city:"深圳"},
{name:"小米",price:999,city:"北京"},
{name:"锤子",price:888,city:"上海"}
]
var sum = 0;
var prices = arrsA.map(function(item,index,arr){
console.log(item,index,arr);
return item.price;
}); // 也可以直接在这后面链式调用,跟着forEach的
console.log(prices); // [8888,1100,999,888]
prices.forEach(function(price,index,arr){
sum += price;
});
console.log(sum); // 11875
二、区别
for循环是js提出时就有的循环方法。forEach是ES5提出的，挂载在可迭代对象原型上的方法，例如Array Set Map。forEach是一个迭代器，负责遍历可迭代对象。那么遍历，迭代，可迭代对象分别是什么呢。
遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。
迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。
可迭代对象：ES6中引入了 iterable 类型，Array Set Map String arguments NodeList 都属于 iterable，他们特点就是都拥有 [Symbol.iterator] 方法，包含他的对象被认为是可迭代的 iterable。
在了解这些后就知道 forEach 其实是一个迭代器，他与 for 循环本质上的区别是 forEach 是负责遍历（Array Set Map）可迭代对象的，而 for 循环是一种循环机制，只是能通过它遍历出数组。
再来聊聊究竟什么是迭代器，还记得之前提到的 Generator 生成器，当它被调用时就会生成一个迭代器对象（Iterator Object），它有一个 .next()方法，每次调用返回一个对象{value:value,done:Boolean}，value返回的是 yield 后的返回值，当 yield 结束，done 变为 true，通过不断调用并依次的迭代访问内部的值。
迭代器是一种特殊对象。ES6规范中它的标志是返回对象的 next() 方法，迭代行为判断在 done 之中。在不暴露内部表示的情况下，迭代器实现了遍历。看代码
let arr = [1, 2, 3, 4] // 可迭代对象let iterator = arr[Symbol.iterator]() // 调用 Symbol.iterator 后生成了迭代器对象console.log(iterator.next()); // {value: 1, done: false} 访问迭代器对象的next方法console.log(iterator.next()); // {value: 2, done: false}console.log(iterator.next()); // {value: 3, done: false}console.log(iterator.next()); // {value: 4, done: false}console.log(iterator.next()); // {value: undefined, done: true}
我们看到了。只要是可迭代对象，调用内部的 Symbol.iterator 都会提供一个迭代器，并根据迭代器返回的next 方法来访问内部，这也是 for...of 的实现原理。
let arr = [1, 2, 3, 4]for (const item of arr) { console.log(item); // 1 2 3 4 }
把调用 next 方法返回对象的 value 值并保存在 item 中，直到 value 为 undefined 跳出循环，所有可迭代对象可供for...of消费。再来看看其他可迭代对象：
function num(params) { console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] let iterator = arguments[Symbol.iterator]() console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: 3, done: false} console.log(iterator.next()); // {value: 4, done: false} console.log(iterator.next()); // {value: undefined, done: true}}num(1, 2, 3, 4)let set = new Set('1234')set.forEach(item => { console.log(item); // 1 2 3 4})let iterator = set[Symbol.iterator]()console.log(iterator.next()); // {value: 1, done: false}console.log(iterator.next()); // {value: 2, done: false}console.log(iterator.next()); // {value: 3, done: false}console.log(iterator.next()); // {value: 4, done: false}console.log(iterator.next()); // {value: undefined, done: true}
所以我们也能很直观的看到可迭代对象中的 Symbol.iterator 属性被调用时都能生成迭代器，而 forEach 也是生成一个迭代器，在内部的回调函数中传递出每个元素的值。
forEach 的中断
在js中有break return continue 对函数进行中断或跳出循环的操作，我们在 for循环中会用到一些中断行为，对于优化数组遍历查找是很好的，但由于forEach属于迭代器，只能按序依次遍历完成，所以不支持上述的中断行为。
let arr = [1, 2, 3, 4], i = 0, length = arr.length;for (; i < length; i++) { console.log(arr[i]); //1,2 if (arr[i] === 2) { break; };};arr.forEach((self,index) => { console.log(self); if (self === 2) { break; //报错 };});arr.forEach((self,index) => { console.log(self); if (self === 2) { continue; //报错 };});
如果我一定要在 forEach 中跳出循环呢？其实是有办法的，借助try/catch：
try { var arr = [1, 2, 3, 4]; arr.forEach(function (item, index) { //跳出条件 if (item === 3) { throw new Error("LoopTerminates"); } //do something console.log(item); });} catch (e) { if (e.message !== "LoopTerminates") throw e;};
若遇到 return 并不会报错，但是不会生效
let arr = [1, 2, 3, 4];
function find(array, num) {
array.forEach((self, index) => {
if (self === num) {
return index;
};
});
};
let index = find(arr, 2); // undefined
forEach 删除自身元素，index不可被重置
在 forEach 中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：
let arr = [1,2,3,4]arr.forEach((item, index) => { console.log(item); // 1 2 3 4 index++;});
index不会随着函数体内部对它的增减而发生变化。在实际开发中，遍历数组同时删除某项的操作十分常见，在使用forEach删除时要注意。
for 循环可以控制循环起点
如上文提到的 forEach 的循环起点只能为0不能进行人为干预，而for循环不同：
let arr = [1, 2, 3, 4], i = 1, length = arr.length;for (; i < length; i++) { console.log(arr[i]) // 2 3 4};
那之前的数组遍历并删除滋生的操作就可以写成
let arr = [1, 2, 1],
i = 0,
length = arr.length;
for (; i < length; i++) {
// 删除数组中所有的1
if (arr[i] === 1) {
arr.splice(i, 1);
//重置i，否则i会跳一位
i--;
};
};
console.log(arr); // [2]
//等价于
var arr1 = arr.filter(index => index !== 1);
console.log(arr1) // [2]
for循环和forEach的性能区别
**性能上:**for循环>forEach>map
可读性: forEach/map>for循环
区别**:** for循环是按顺序遍历，按照下标索引的方式进行读取访问元素的,随机访问,而forEach/map等是使用iterator迭代器进行遍历，先取到数组中的每一项的地止放入到队列中,然后按顺序取出队里的地址来访问元素
大体上讲,如果数据量不是很大的情况下,抛开业务场景和使用便利性，单纯谈性能和效率是没有意义的,一些Es5,ES6新增的数组迭代器方法方便了前端开发，使得以往复杂或者冗长的代码，可以变得易读而且精炼
而好的for循环写法，在大数据量的情况下，确实也有着更好的兼容和多环境运行表现
你可以使用console.time()以及console.timeEnd()进行测试的,个人觉得还是要多用Es5和Es6新增的迭代器方法,相比于for循环,得定义初始值,得跟踪循环计数的变量,是很容易出问题的
代码是写给人看的,顺便在机器上运行。从这一角度上讲,个人支持多用Es5,Es6的迭代器方法,有时候在一些面试当中,会问你这其中的一些性能比较的
在性能对比方面我们加入一个 map 迭代器，它与 filter 一样都是生成新数组。我们对比 for forEach map 的性能在浏览器环境中都是什么样的：
性能比较：for > forEach > map 在chrome 62 和 Node.js v9.1.0环境下：for 循环比 forEach 快1倍，forEach 比 map 快20%左右。
原因分析for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。
如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。当大家使用迭代器遍历一个数组时，如果不需要返回一个新数组却使用 map 是违背设计初衷的。在我前端合作开发时见过很多人只是为了遍历数组而用 map 的：
