forEach循環裡break使用方式詳解

Posted on by

一. 在forEach裡使用break 會發生什麼

大傢都知道 js 的 forEach裡是不能使用break。但是為什麼不能在forEach裡使用呢？在forEach裡使用break 會發生什麼呢？

紙上得來終覺淺，絕知此事要躬行。要想知道發生什麼，不妨在代碼裡驗證一下。

let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
    if (item > 2) {
        break
    }
    console.log(item)
})
// SyntaxError: Illegal break statement (非法中斷語句)

在控制臺可以看到輸出：語法錯誤。

二. 為什麼不能在forEach裡使用break

要想知道forEach裡為什麼不能使用break，必須先要搞清楚break的語法。

你真的瞭解break嗎

break 表示中止當前循環。

語法：break [label];

label：與語句標簽相關聯的標識符。如果 break 語句不在一個循環或者Switch語句中，則該項是必須的。

我們看一個例子：

我們平時正常使用時

let arr = [1, 2, 3, 4, 5]
for (let i = 0; i < arr.length; i++) {
    if (arr[i] > 2) {
        break // 大於2 跳出整個循環
    }
    console.log(arr[i]) // 1, 2
}

break 與語句標簽一起使用時

let arr = [1, 2, 3, 4, 5]
outer_block: // 標識最外層循環
for (let i = 0; i < arr.length; i++) {
    console.log('i', arr[i]) // 1
    inner_block: // 標識裡面的for循環
    for (let j = 0; j < arr.length; j++) {
        if (j > 3) {
            break outer_block  // 跳出最外層循環
        }
        console.log('j', arr[j]) // 1, 2, 3, 4
    }
}

輸出結果：最外層輸出：1，最次層輸出：1,2,3,4。可以看出brake終止循環是有條件的。我們在回來看forEach這個問題。

先看下forEach語法：

forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

是上面的定義相當於：

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

可以看出：我們在forEach裡使用break，其實是在callback裡使用break。再明白一點，其實就是相當於你在for循環裡這樣寫：

let arr = [1, 2, 3, 4, 5]
outer_block: 
for (let i = 0; i < arr.length; i++) {
    console.log('i', arr[i])
    inner_block1:
    (function() {
        inner_block2:
        break // 報錯，不能直接使用break
    })()
}

到這裡我想你已經明白瞭為什麼不能在forEach裡使用break瞭。回到本文的題目上來。

三.如何在forEach的循環裡break？

查閱MDN，上面有一個備註：

編輯切換為居中

MDN

在forEach裡合法的使用break

function breakInForEach(arr) {
	let BreakException = {};
	let res = false;
	try {
	    arr.forEach(item => {
	       if (item === 2) {
	          res = true;
		  throw BreakException;
	        }
	    })
	}
	catch(e) {
	    if (e !== BreakException) throw e
	}
	return res;
}
console.log(foreachBreak([1， 2， 3， 4， 5， 6])); // true

也可以使用every 或者 some等

最推薦的方式呢，就是這種需要break的場景下，直接使用every或者some。

  • every: 碰到return false的時候，循環中止，return true 循環繼續；
  • some: 碰到return ture的時候，循環中止，return false 循環繼續;

總結

本文介紹瞭為什麼不能在forEach裡使用break；在forEach裡使用break 會發生什麼以及怎樣在forEach裡使用break，更多關於forEach循環break使用的資料請關註WalkonNet其它相關文章！

推薦閱讀：