js中for和forEach区别

forEach语法

与for循环一样，forEach也属于完整遍历数组的方法，并会对数组每项元素执行提供的回调函数，一个完整的forEach应该是这样，我们一一解释回调函数的参数，与后方的this有何作用。

arr.forEach(function(self,index,arr){},this);

self：数组当前遍历的元素，默认从左往右依次获取数组元素。

index：数组当前元素的索引，第一个元素索引为0，依次类推。

arr：当前遍历的数组。

this：回调函数中this指向。

我们来看个简单的forEach例子，加强对于这四个参数的印象：

let arr1 = [1, 2, 3, 4];
let obj = {
    a: 1
};
arr1.forEach(function (self, index, arr) {
    console.log(`当前元素为${self}索引为${index},属于数组${arr}`);
    //做个简单计算
    console.log(self + this.a);
}, obj)

可以看到，arr参数其实就是我们正在遍历的数组，而回调函数中的this指向我们提供的obj。是不是非常简单？

你肯定在想，第三个参数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中索引index自增机制

forEach删除自身元素index不会被重置

还记得文章开头的问题吗，那段代码其实只会执行一次，数组也不会被删除干净，这是因为forEach在遍历跑完回调函数后，会隐性让index自增，像这样：

arr.forEach((item, index) => {
    arr.splice(index, 1);
    console.log(1);
    //这里隐性让index自增加1
    index++;
});

for和forEach的区别

1.for循环可以使用break跳出循环，但forEach不能。

2.for循环可以控制循环起点（i初始化的数字决定循环的起点），forEach只能默认从索引0开始。

3.for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，我们无法左右它）