JS forEach 如何跳出循環

for循環

JavaScript中，for循環可以使用 break 和 continue 來跳出：

• continue：跳出本次循環

• break：結束循環

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

forEach循環

除了for循環，常用的forEach如何退出呢？

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

可以看到，直接使用break，會報非法中斷語句錯誤

再試試 continue ：

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

可以看到同樣報錯，continue不能在非循環語句中，原因是forEach的參數是一個回調函數，并不是循環語句，所以無法執行continue語句

具體可以參考：SyntaxError: continue must be inside loop - JavaScript | MDN

里面也提到了解決方法，使用 return 退出當前循環，以及使用 for of代替forEach

numbers.forEach(number => {
  if (number === 2) {
    // 跳出當前循環
    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 來跳出循環應該如何操作呢，上面文檔中沒有提到，但可以使用 try catch來實現：

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

綜上，使用forEach時，使用 return 跳出當前循環，使用 try catch 跳出整個循環。