JavaScript中可以使用forEach跳出循環嗎

這篇文章給大家介紹JavaScript中可以使用forEach跳出循環嗎，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

forEach使用說明

arr.forEach(function callback(currentValue, index, array) {
    //your iterator
}[, thisArg]);

• currentValue --- 當前處理的元素

• index --- 當前處理元素的索引

• array ---forEach應用的數組

有一段提示寫到了在forEach中break和return的用法。原文如下：

There is no way to stop or break a forEach()loop other than by throwing an exception. If you need such behavior, theforEach()method is the wrong tool. Use a plain loop instead. If you are testing the array elements for a predicate and need a Boolean return value, you can useevery() or
some() instead. If available, the new methodsfind() or findIndex() can be used for early termination upon true predicates as well.

意思就是說在forEach中使用break和return是錯誤的，如果希望使用break或者return請使用every或者some函數。

那么回到標題，首先forEach是不能使用任何手段跳出循環的，為什么呢？我們知道forEach接收一個函數，它一般有兩個參數，第一個是循環的當前元素，第二個是該元素對應的下標，我們手動實現一下：

Array.prototype.myForEach = function (fn) {
    for (let i = 0; i < this.length; i++) {
        fn(this[i], i, this);
    }
}

forEach是不是真的這么實現我無從考究，但是以上這個簡單的偽代碼確實滿足forEach的特性，而且也很明顯就是不能跳出循環，因為你根本沒有辦法操作到真正的for循環體。

后來經過查閱文檔，發現官方對forEach的定義根本不是我認為的語法糖，它的標準說法是forEach為每個數組元素執行一次你所提供的函數。到這里我的思路逐漸明朗，官方文檔也有這么一段話：

除拋出異常之外，沒有其他方法可以停止或中斷循環。如果您需要這種行為，則該forEach()方法是錯誤的工具。

使用拋出異常來跳出foreach循環

let arr = [0, 1, "stop", 3, 4];
try {
    arr.forEach(element => {
        if (element === "stop") {
            throw new Error("forEachBreak");
        }
        console.log(element); // 輸出 0 1 后面不輸出
    });
} catch (e) {
    console.log(e.message); // forEachBreak
};

當然，使用try-catch包裹時，當循環體過大性能會隨之下降，這是無法避免的，所以拋出異常并不是解決forEach問題的銀彈，我們回歸到開頭寫的那段偽代碼，我們對它進行一些優化，在真正的for循環中加入對傳入函數的判斷：

Array.prototype.forEach = function (fn) {
    for (let i = 0; i < this.length; i++) {
        let ret = fn(this[i], i, this);
        if (typeof ret !== "undefined" && (ret == null || ret == false)) break;
    }
}

這樣的話自然就能根據return值來進行循環跳出啦：

let arr = [0, 1, "stop", 3, 4];

arr.forEach(element => {
    if (element === 'stop') return false
    console.log(element); // 輸出 0 1 后面不輸出
});

console.log('return即為continue：');
arr.forEach(element => {
    if (element === 'stop') return
    console.log(element); // 0 1 3 4
});

文檔中還提到forEach需要一個同步函數，也就是說在使用異步函數或Promise作為回調時會發生預期以外的結果，所以forEach還是需要慎用或者不要使用，當然這并不意味著項目開發中要一直用簡單的for循環去完成一切事情，我們可以在遍歷數組時使用for..of..，在遍歷對象時使用for..in..，而官方也在forEach文檔下列舉了其它一些工具函數：

Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.every()
Array.prototype.some()

關于JavaScript中可以使用forEach跳出循環嗎就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。