关于javascript:有了for循环-为什么还要forEach

js 中那么多循环，for for…in for…of forEach，有些循环感觉上是大同小异明天咱们探讨下 for 循环和 forEach 的差别。
咱们从几个维度展开讨论：

for 循环和 forEach 的本质区别。
for 循环和 forEach 的语法区别。
for 循环和 forEach 的性能区别。
本质区别
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 源码，Array Set Map 实例上都挂载着 forEach，但网上的答案大多数是通过 length 判断长度，利用 for 循环机制实现的。但在 Set Map 上应用会报错，所以我认为是调用的迭代器，一直调用 next，传参到回调函数。因为网上没查到答案也不妄下断言了，有答案的人能够评论区给我留言）

for 循环和 forEach 的语法区别
理解了本质区别，在利用过程中，他们到底有什么语法区别呢？

forEach 的参数。
forEach 的中断。
forEach 删除本身元素，index 不可被重置。
for 循环能够管制循环终点。
forEach 的参数
咱们真正理解 forEach 的残缺传参内容吗？它大略是这样：

arr.forEach((self,index,arr) =>{},this)
复制代码
self：数组以后遍历的元素，默认从左往右顺次获取数组元素。
index：数组以后元素的索引，第一个元素索引为 0，顺次类推。
arr：以后遍历的数组。
this：回调函数中 this 指向。

let arr = [1, 2, 3, 4];
let person = {name: '技术直男星辰'};
arr.forEach(function (self, index, arr) {console.log(` 以后元素为 ${self}索引为 ${index}, 属于数组 ${arr}`);
    console.log(this.name+='真帅');
}, person)
复制代码

咱们能够利用 arr 实现数组去重：

let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2);   // [1,2,3]

复制代码

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 的性能区别
在性能比照方面咱们退出一个 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 的：

let data = [];
let data2 = [1,2,3];
data2.map(item=>data.push(item));
复制代码

写在最初：这是我面试遇到的一个问题，过后只晓得语法区别。并没有从可迭代对象，迭代器，生成器和性能方面，多角度进一步辨别两者的异同，我也心愿我能把一个简略的问题从多角度开展细讲，让大家正在搞懂搞透彻。

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163 互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点 star: http://github.crmeb.net/u/defu 不胜感激！