有了for循环为什么还要forEach

有了for循环为什么还要forEach

本质区别

for 循环是js提出时就有的循环方法 forEach是es5提出的，挂载在可迭代对象的原型上的方法，例如 Array Set Map， forEach是一个迭代器，负责便利可迭代对象，那么可迭代对象是什么呢

什么是迭代器呢？

es6 有一个 Generator生成器，当它有一个 .next() 方法，每次调用返回一个对象 {value: value, done: Boolean}, 通过不断调用并依次迭代访问内部的值

let arr = [1,2,3]
let iterator = arr[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: undefined, done: true}

const map = new Map()
map.set('a', 1)
map.set('b', 2)
map.forEach(item => {
    console.log(item)
})

for (const iterator of map) {
    console.log(iterator)
}

区别

for 循环只能循环数组、forEach循环可迭代对象

注意

正常情况下 'string'.forEach()会报错，字符串无法forEach，但是有没有办法支持forEach呢？ 我们可以通过给string 加上 Symbol.iterator方法，再构造next方法

中断循环

for 可以使用 return break进行中断 forEach 原则上不能中断，因为它遍历的是迭代对象，只能无脑的遍历到最后,即使使用return也会生效，那么 for...of 能不能中断呢？原理一样，不可以中断

如果实在要中断怎么处理呢，可以使用 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;
};