JavaScript forEach 方法跳出循環(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) {
// 跳出整個循環(huán)
break // SyntaxError: Illegal break statement
}
console.log(number)
})
可以看到，直接使用break，會報非法中斷語句錯誤
再試試 continue ：
numbers.forEach(number => {
if (number === 2) {
// 跳出當(dāng)前循環(huán)
continue // SyntaxError: Illegal continue statement: no surrounding iteration statement
}
console.log(number)
})
可以看到同樣報錯，continue不能在非循環(huán)語句中，原因是forEach的參數(shù)是一個回調(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來實現(xiàn)：
try {
numbers.forEach(number => {
if (number === 2) {
throw new Error()
}
console.log(number) // 1
})
} catch (error) {
console.log('捕獲到錯誤')
}
綜上，使用forEach時，使用 return 跳出當(dāng)前循環(huán)，使用 try catch 跳出整個循環(huán)。
到此這篇關(guān)于JavaScript forEach 方法跳出循環(huán)的文章就介紹到這了,更多相關(guān)JavaScript forEach 方法跳出循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于leaflet.js實現(xiàn)修改地圖主題樣式的流程分析
這篇文章主要介紹了基于leaflet.js實現(xiàn)修改地圖主題樣式的流程，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
微信小程序圖片輪播組件gallery slider使用方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序圖片輪播組件gallery slider的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
一文帶你搞懂JavaScript中轉(zhuǎn)義字符的使用
說起轉(zhuǎn)義字符，大家最先想到的肯定是使用反斜杠，這也是我們最常見的，很多編程語言都支持。除了反斜杠以外，在前端開發(fā)中，還有其他幾種轉(zhuǎn)義字符，也是較常見的，本文將對這些做一個總結(jié)2023-02-02
JavaScript中Array.map()的使用與技巧分享(附實際應(yīng)用代碼)
Array.map()適合需要返回新數(shù)組、進行鏈?zhǔn)秸{(diào)用或不修改原數(shù)組的場景,它與forEach()的區(qū)別在于有返回值,基本語法中,callback函數(shù)處理每個元素并返回新值,本文介紹了JavaScript中Array.map()的使用與技巧分享(附實際應(yīng)用代碼),需要的朋友可以參考下2025-02-02
這篇文章主要為大家詳細(xì)介紹了js圖片無縫滾動插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)隨機點名程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了使用js繪制幾何圖形系列教程中的畫切線篇，非常方便我們好好熟悉理解javascript，推薦給大家2015-01-01
這篇文章主要給大家介紹了關(guān)于js中parseInt()詭異行為的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)Session功能及無法獲取session問題的解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要給大家介紹了關(guān)于JavaScript惰性求值的一種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01