JS面試題之forEach能否跳出循環詳解

Posted on by

當年懵懂無知的我被問到這個問題時，腦袋一片空白，當然也沒答對，一直以來我對forEach都有一種錯誤的理解，由於它比原始的for循環簡潔許多，導致我一度認為那是為瞭方便書寫所創造出來的語法糖，在業務中也經常使用，但從沒考慮過這種方式存在的問題。

forEach使用說明

參考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=example

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()

根據不同的業務場景，選擇使用對應的工具函數來更有效地處理業務邏輯，至於forEach，我想就從此相忘於江湖吧。

總結

到此這篇關於JS面試題之forEach能否跳出循環的文章就介紹到這瞭,更多相關JS forEach跳出循環內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：