s中那么多循环,for for…in for…of forEach,有些循环感觉上是大同小异今天我们讨论下for循环和forEach的差异。
我们从几个维度展开讨论:

for循环和forEach的本质区别。
for循环和forEach的语法区别。
for循环和forEach的性能区别。

for循环是js提出时就有的循环方法。forEach是ES5提出的,挂载在可迭代对象原型上的方法,例如Array Set Map。
forEach是一个迭代器,负责遍历可迭代对象。
forEach 的参数
我们真正了解 forEach 的完整传参内容吗?它大概是这样:

arr.forEach((self,index,arr) =>{},this)

self: 数组当前遍历的元素,默认从左往右依次获取数组元素。
index: 数组当前元素的索引,第一个元素索引为0,依次类推。
arr: 当前遍历的数组。
this: 回调函数中this指向。

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]