JavaScript中forEach的錯誤用法彙總

2022-06-09 14:00:52

前言

使用過forEach的人大致有兩種：普通使用，簡簡單單；複雜使用，總想搞出點花樣來，結果一些莫名其妙的bug就出現了，解決這些bug所花費的時間都可以換一種思路實現了，能用作for迴圈的，又不只是forEach。沒錯，筆者就是後者，終究是自己“學藝不精”。於是乎，花點時間，結合自己的實際開發經驗，再來好好理理forEach。

語法

forEach()是陣列物件的一個原型方法，該方法會對陣列中的每一個元素執行一次給定的回撥函數，並且始終返回undefined。類陣列物件是沒有forEach方法的，例如arguments。forEach的用法比較簡單：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

實際例子：

const arr = [1,2,3];
arr.forEach(item => console.log(item)); // 1,2,3

引數說明：

callback：陣列中每一個元素將要執行的回撥函數，可以有1-3個引數

currentValue：當前正在處理的元素，必傳
index：當前正在處理的元素的索引，可選引數
array：forEach方法操作的原陣列物件，可選引數

thisArg：當前執行callback回撥函數時，回撥函數的this指向，預設指向的全域性物件，可選引數

語法看起來並不複雜，那麼看看是否會犯下面的錯誤用法：

錯誤用法

錯誤用法指的是標題所描述的操作，不是正文內容，切記，切記。

新增或刪除原陣列中的資料

forEach()在第一次呼叫callback時就會確定遍歷的範圍，一般來說會按照索引升序為陣列中的有效元素執行一次callback函數。如果是未初始化的陣列項或者在呼叫forEach()後新增到陣列中的項都不會被存取到，如果在遍歷時刪除陣列中的元素，則可能會出現意外的情況。

無效的值會直接跳過

呼叫後新增元素，將不會被存取到

const arr = [1,,,2,4];
console.log(arr.length); // 5
let callbackCounts = 0;
arr.forEach(item => {
    console.log(item); // 1 2 4
    callbackCounts++;
    arr.push(6); // 呼叫後新增元素，將不會被存取到
})
console.log(callbackCounts); // 3
console.log(arr); // [1,,,2,4,6,6,6]

刪除陣列中的元素

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.length); // 4
let callbackCounts = 0;
arr.forEach((item, index) => {
    // arr.shift();
    console.log(item); // 'a','b','d',其中'c'會被跳過
    if (item === 'b') {
        // arr.shift(); // 刪除頭部，arr的結果：['b', 'c', 'd']
        arr.splice(index, 1); // 刪除當前元素，arr的結果：['a', 'c', 'd']
        // arr.splice(-1); // 刪除最後一個元素，arr的結果：['a', 'b', 'c']
    }
    callbackCounts++;
})
console.log(callbackCounts); // 3
console.log(arr); // ['b', 'c', 'd']

刪除元素時情況可能會比較複雜一點，感興趣的朋友可以自己測試，我們可以這麼理解：

forEach在呼叫時就確定了遍歷範圍，傳遞給callback的值是forEach在遍歷到該元素時的值，即使在callback中刪除了陣列中該元素，但是值已經傳遞進來
如果是有效的值，callbackCounts會遞增。在下一輪迴圈時，forEach會根據上一輪迴圈時的索引得到當前迴圈對應的值，注意此時陣列長度已經改變，就會出現“跳過”的現象
然後重複操作，知道陣列遍歷完畢

搞懂了”跳過“，你還敢想當然的刪除陣列中的資料嗎？

修改原陣列中的資料

既然不能新增和刪除，那我要是修改呢？其實修改陣列中的元素，不是不可以，只是要注意使用方法。

如果陣列中是基本資料型別：string、number、boolean等，只使用回撥函數的第一個引數修改陣列中的值是不會影響原陣列的

const arr = [1,2,3,4,5]
arr.forEach((item, index, array) => {
    item+=1; // [1,2,3,4,5]
    // arr[index]+=1; // [2,3,4,5,6]
    // array[index]+=1; // [2,3,4,5,6]
})
console.log(arr);

如果陣列中的是參照資料型別：object等，直接替換陣列項是不會影響原陣列的

const arr = [
    {name: '張三', id: 1},
    {name: '李四', id: 2}
]
arr.forEach((item, index, array) => {
    if (item.id === 2) {
        item = {name: '王五', id: item.id}; // 張三、李四
        // Object.assign(item, {name: '王五', id: item.id}); // 張三、王五
        // arr[index] = {name: '王五', id: item.id}; // 張三、王五
        // array[index] = {name: '王五', id: item.id}; // 張三、王五
    }
})
console.log(arr);

陣列物件在遍歷時，實際上是將陣列項的參照地址賦值給item，如果將另一個物件的參照地址重新賦值給item，並不會改變原參照地址的資料，也就不會影響原陣列。

如果陣列中的是參照資料型別：object等，此時我們只修改陣列項的某一個屬性，這個時候是會影響原陣列的

const arr = [
    {name: '張三', id: 1},
    {name: '李四', id: 2}
]
arr.forEach((item, index, array) => {
if (item.id === 2) {
    item.name = '王五';
    // arr[index].name = '王五'; // 張三、王五
    // array[index].name = '王五'; // 張三、王五
}
})
console.log(arr); // 張三、王五

道理呢也和2類似，item指向的是參照地址，修改屬性相當於是修改了參照地址中物件的屬性，也就會修改原陣列

綜上我們可以發現，如果要在forEach中修改原陣列，那麼需要在其回撥函數中，通過索引index或者藉助Object.assgin()才可以實現，最終原理都是修改參照地址中的資料，而不是直接修改。

回撥函數中使用非同步函數

非同步函數和同步函數的執行順序此處就不細說，詳情可以移步：搞不清楚事件迴圈，那就看看這篇文章，簡單來說就是同步程式碼先於非同步程式碼執行。

看一個例子：

const arr = [1,2,3,4,5]
let sum = 0;
let callbackCounts = 0;
function Sum(a, b) {
    return new Promise((resovle) => {
        resovle(a + b)
    })
}
arr.forEach(async (item, index, array) => {
    sum = await Sum(sum, item)
})
console.log(sum); // 0

實際得到的求和的值並不是我們期待的15，而是0。

如果我們需要實現非同步求和，可以使用for迴圈實現：

const arr = [1,2,3,4,5]
let sum = 0;
let callbackCounts = 0;
function Sum(a, b) {
    return new Promise((resovle) => {
        resovle(a + b)
    })
}
(async function() {
    for (let item of arr) {
        sum = await Sum(sum, item)
    }
    console.log(sum); // 15
})();

使用return結束迴圈

在使用for迴圈時，我們一般可使用break、return來跳出迴圈，丟擲異常也可以，但是這不是正常的開發流程。我們來試一下在forEach中使用break、return有沒有作用：

forEach結束迴圈

const arr = [1,2,3,4,5]
let callbackCounts = 0;
arr.forEach((item, index, array) => {
    callbackCounts++;
        if (item === 2) {
        return; // forEach中不能使用break，即使使用return，也無法中止迴圈
    }
})
console.log(arr.length, callbackCounts); // 5 5

如果非得要跳出forEach迴圈，首先建議的是使用其他迴圈方法，例如：for、for of、for in、map等，其次我們可以考慮丟擲一個異常來跳出forEach迴圈：

const arr = [1,2,3,4,5]
let callbackCounts = 0;
try {
    arr.forEach((item, index, array) => {
        callbackCounts++;
        if (item === 2) {
            throw 'throw forEach';
        }
    })
} catch (e) {
    console.log(arr.length, callbackCounts); // 5 2
}

如果真要使用throw來丟擲異常，那麼使用其他迴圈方法不香嗎

未傳入this

forEach()也可能存在this指向問題，例如：

function Counter() {
    this.sum = 0;
}
Counter.prototype.add = function (array) {
    array.forEach(function(element) {
        this.sum += element;
    });
}
const obj = new Counter();
obj.add([1,2,3,4,5])
console.log(obj.sum); // 0

未指定this，則預設未window物件，此時的this.sum為undefined，而我們想的是this指向傳入的陣列。那麼需要傳入this或者使用箭頭函數。

array.forEach((element) => {
    this.sum += element;
});
array.forEach(function(element) {
    this.sum += element;
}, this);

正確用法

避免錯誤用法，當然就是正確用法咯。

其實forEach在設計出來只是為了簡化for迴圈的遍歷，如果要過多的進行其他操作，就違背了設計初衷了。每一個API都有自己的適用範圍，如果堅持要一把梭，可能就會踩很多坑。

簡單總結一下正確的使用方法：

最好只限於遍歷原陣列，不涉及修改原陣列中的資料
避免在回撥函數中存在非同步操作
不能使用return
forEach()的回撥函數使用箭頭函數，可避免this指向問題

總結

forEach本身並不會改變原陣列，但是其回撥函數可能會修改。如果真要修改原陣列，建議使用map、filter等方法
forEach方法始終返回undefined，這使得forEach無法像map、filter一樣可以鏈式呼叫
除了丟擲異常外，forEach無法被中止或者跳出迴圈，如果要跳出迴圈，建議使用其他for迴圈方法
如果是涉及非同步函數，可以考慮使用for await of代替forEach

到此這篇關於JavaScript中forEach錯誤用法的文章就介紹到這了,更多相關js forEach錯誤用法內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！