快捷導(dǎo)航

JavaScript forEach 方法跳出循環(huán)的操作方法

更新時間：2024年01月03日 09:28:32 作者：easylee

這篇文章主要介紹了JavaScript forEach 方法跳出循環(huán)的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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來實(shí)現(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)文章

JS?中在嚴(yán)格模式下?this?的指向問題
這篇文章主要介紹了JS?中在嚴(yán)格模式下this的指向問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-09-09
JavaScript中this關(guān)鍵詞的使用技巧、工作原理以及注意事項(xiàng)
在JavaScript中，this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨校瑃his 還是隨處可用的。這篇文章介紹了this 的工作原理，它會造成什么樣的問題以及this 的相關(guān)例子。
2014-05-05
js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
這篇文章主要為大家詳細(xì)介紹了js+html5實(shí)現(xiàn)半透明遮罩層彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法實(shí)例分析【順序查找、最大最小值、自組織查詢】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實(shí)例形式分析了順序查找、最大最小值、自組織查詢算法相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-02-02
JavaScript實(shí)現(xiàn)HTTPS?SSE連接完整示例代碼
服務(wù)器推送事件是一項(xiàng)技術(shù),允許服務(wù)器向?yàn)g覽器推送實(shí)時更新,這篇文章主要介紹了JavaScript實(shí)現(xiàn)HTTPS?SSE連接的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2026-03-03
解析JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施
本文主要對JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施進(jìn)行介紹，具有一定的參考價值，需要的朋友一起來看下吧
2016-12-12
JavaScript實(shí)現(xiàn)生成動態(tài)表格和動態(tài)效果的方法詳解
這篇文章主要介紹了如何通過JavaScript語言實(shí)現(xiàn)動圖表格的生成以及動態(tài)效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-02-02
JavaScript中document.forms[0]與getElementByName區(qū)別
在很多情況下JavaScript中document.forms[0]與getElementByName這兩種用法沒有區(qū)別，這片文章詳細(xì)的解釋了兩者的區(qū)別和用法，有興趣的朋友可以參考一下。
2015-01-01
js前端如何寫一個精確的倒計時代碼
關(guān)于寫倒計時大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計時這樣寫沒有問題，但是如果是長時間的倒計時，這樣寫就會不準(zhǔn)確
2019-10-10
Windows Live的@live.com域名注冊漏洞利用代碼
Windows Live的@live.com域名注冊漏洞利用代碼...
2006-12-12