背景

這個(gè)問題平時(shí)工作中基本不會遇到，通常是面試時(shí)，有的面試官喜歡問這個(gè)，所以有了探討的意義。
首先我們來看看 for 循環(huán)是怎么處理跳出的。

for循環(huán)

JavaScript中，for循環(huán)可以使用 break 和 continue 來跳出：

• continue：跳出本次循環(huán)
• break：結(jié)束循環(huán)

for (let i = 0; i < 10; i++) {
  if (i === 1) {
    // 跳出本次循環(huán)，不會打印1
    continue
  }
  if (i === 3) {
    // 結(jié)束循環(huán)，不會打印3和之后的數(shù)字
    break
  }
  // 輸出0 2
  console.log(i)
}

forEach循環(huán)

了解了 for 循環(huán)跳出之后，forEach 如何跳出呢？

const numbers = [1, 2, 3, 4, 5]
numbers.forEach(number => {
  if (number === 2) {
    // 跳出整個(gè)循環(huán)
    break  // SyntaxError: Illegal break statement
  }
    console.log(number)
})

可以看到，直接使用break，會報(bào)非法中斷語句錯(cuò)誤
再試試 continue ：

numbers.forEach(number => {
  if (number === 2) {
    // 跳出當(dāng)前循環(huán)
    continue  // SyntaxError: Illegal continue statement: no surrounding iteration statement
  }
    console.log(number)
})

可以看到同樣報(bào)錯(cuò)，continue不能在非循環(huán)語句中，原因是forEach的參數(shù)是一個(gè)回調(diào)函數(shù)，并不是循環(huán)語句，所以無法執(zhí)行continue語句
具體可以參考：SyntaxError: continue must be inside loop - JavaScript | MDN
里面也提到了解決方法，使用 return 退出當(dāng)前循環(huán)，以及使用 for of代替forEach

numbers.forEach(number => {
  if (number === 2) {
    // 跳出當(dāng)前循環(huán)
    return 
  }
  console.log(number) // 1 3 4 5
}

for (const number of numbers) {
  if (number === 2) {
    continue
  }
  console.log(number) // 1 3 4 5
}

但是就想使用 forEach 來跳出循環(huán)應(yīng)該如何操作呢，上面文檔中沒有提到，但可以使用 try catch來實(shí)現(xiàn)：

try {
  numbers.forEach(number => {
    if (number === 2) {
      throw new Error()
    }
    console.log(number) // 1
  })
} catch (error) {
  console.log('捕獲到錯(cuò)誤')
}

另辟蹊徑
除了上面的用法，前幾天刷博客看評論的時(shí)候，看見一個(gè)方法，大家也可以嘗試一下。

var list = [1, 2, 3, 4, 5]
list.forEach((v, index) => {
if (v == 3) {
  list = list.splice(0, index)
}

console.log(index)
})

在想要跳出循環(huán)的時(shí)候，將原數(shù)組的數(shù)量減少，這樣就直接跳出了數(shù)組，可以說是非常巧妙了??，大家也可以試試。

綜上，使用 forEach 時(shí)，使用 return 跳出當(dāng)前循環(huán)，使用 try catch 跳出整個(gè)循環(huán)，同時(shí)也可以試試上面的另類方法。文章來源地址http://www.zghlxwxcb.cn/news/detail-771922.html

到了這里，關(guān)于JavaScript forEach 方法跳出循環(huán)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！