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自增，我們無法左右它）