Js中foreach()用法及使用的坑

阿新 • • 發佈：2021-07-07

foreach語法：

[ ].forEach(function(value,index,array){
　　//code something
});

forEach()方法對陣列的每個元素執行一次提供的函式。

var array = ['a', 'b', 'c'];
array.forEach(function(element) {
  console.log(element);
});

輸出為：

a;
b;
c;

forEach()方法對陣列的每個元素執行一次提供的函式。總是返回undefined；

var arr = [1,2,3,4];   
arr.forEach(alert); 
 
//等價於： 
var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
  alert(array[k]);
}

forEach方法中的function回撥有三個引數：
第一個引數是遍歷的陣列內容，
第二個引數是對應的陣列索引，
第三個引數是陣列本身

forEach使用的坑

1.forEach不支援break

大家都知道，在使用for迴圈時可以使用break跳出迴圈，比如我希望找到陣列中符合條件的第一個元素就跳出迴圈，這對於優化陣列遍歷是非常棒的。很遺憾，forEach並不支援break操作，使用break會導致報錯。

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; //報錯
    };
});

那forEach能不能跳出迴圈呢？可以，不過不是使用break，而是結合try catch操作

2.forEach中使用return無效

首先需要確定的，直接再for迴圈中使用return會報錯（函式中使用for可以return），forEach中使用return不會報錯，但rerutn並不會生效，我們來看個例子：

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

上述程式碼想要找到數字2在陣列中的索引，但return並不會起到終止程式碼執行並返回值的作用。

當然如果我們真的要用return返回某個值，那就只能將return操作放在函式中，而不是forEach迴圈中，像這樣：

function find(array, num) {
    let _index;
    array.forEach((self, index) => {
        if (self === num) {
            _index = index;
        };
    });
    return _index;
};

3.forEach刪除自身元素index不會被重置

還記得文章開頭的問題嗎，那段程式碼其實只會執行一次，陣列也不會被刪除乾淨，這是因為forEach在遍歷跑完回撥函式後，會隱性讓index自增，像這樣：

arr.forEach((item, index) => {
    arr.splice(index, 1);
    console.log(1);
    //這裡隱性讓index自增加1
    index++;
});

當第一次遍歷結束，此時陣列為[2]而index變成了1，此時陣列最大索引只是0，不滿足條件，所以跳出了迴圈。

靈機一動，有沒有什麼辦法讓此時的forEach不跳出迴圈呢，當然有，使用ES6的拓展運算子。

[...arr].forEach((item, index) => {
    arr.splice(index, 1);
    console.log(1);
});

通過拓展運算子重置陣列arr，達到不跳出迴圈的目的，你會發現內部確實執行了兩次，很遺憾的是index依舊沒被重置，所以陣列arr還是無法在遍歷的同時刪空自己。

因為在實際開發中，遍歷陣列同時刪除某項的操作十分常見，所以對於習慣了forEach的同學，這一點一定要注意。

for與forEach的區別

那麼說到這裡，for迴圈與forEach有什麼區別呢？我想大家應該都能說上幾點了吧，比如：

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

2.for迴圈可以控制迴圈起點（i初始化的數字決定迴圈的起點），forEach只能預設從索引0開始。

3.for迴圈過程中支援修改索引（修改 i），但forEach做不到（底層控制index自增，我們無法左右它）。

http://www.bijianshuo.com 軟文發稿平臺

陣列遍歷並刪除自身

好了，我們迴歸問題的本質，怎麼在遍歷一個數組的同時，並刪除符合條件的所有項呢？

其實很簡單，我們可以使用for迴圈，像這樣：

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]

刪除符合條件的所有項，不就是過濾嗎？過濾，本能想到filter方法，也很簡單：

var arr1 = arr.filter((index) => {
    return index !== 1;
});
console.log(arr1); //[2]

更少的程式碼量，只是得新建一個變數來接受filter方法的返回值。

你說，我這個人就比較倔強，forEach因為index索引無法重置，對於刪除陣列項真的很困難，那我非要用forEach去做這個功能行不行，當然行，只是我們得讓陣列反過來遍歷：

arr.slice().reverse().forEach(function (item, index, arr1) {
    if (item === 1) {
        arr.splice(arr1.length - 1 - index, 1);
    }
});
console.log(arr);//[2]