在JavaScript中終止forEach循環(huán)的三種方式
一、序言
這個問題估計會難倒一部分同學。甚至會有人反問，forEach循環(huán)在JavaScript中能終止嗎？ 比如 ，我舉個例子
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
array.forEach((it) => {
if (it >= 0) {
console.log(it)
// 0 1 2 3
return // or break
}
})
從這個例子來看，好像不管是通過return還是break都無法終止forEach循環(huán)。 forEach相當于就是函數(shù)的執(zhí)行，比如下面這段代碼，即使func1執(zhí)行了return語句，仍然會打印出2。
const func1 = () => {
console.log(1)
return
}
const func2 = () => {
func1()
console.log(2)
}
func2()
二、方法
然而，我能想到三種方式可以終止forEach循環(huán)。
01. 拋出錯誤
當找到一個大于等于0的數(shù)字之后，return循環(huán)將終止執(zhí)行，所以控制臺只會輸出數(shù)字0，代碼如下：
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
try {
array.forEach((it) => {
if (it >= 0) {
console.log(it) // 輸出：0
throw Error(`We've found the target element.`)
}
})
} catch (err) {
}
02. 將數(shù)組長度設(shè)置成0
我們也能通過將數(shù)組長度設(shè)置成0來終止forEach循環(huán)。代碼如下
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
array.forEach((it) => {
if (it >= 0) {
console.log(it) // 輸出：0
array.length = 0
}
})
03. 將數(shù)組元素移除
當滿足條件時，使用splice方法將數(shù)組內(nèi)元素移除，也能終止forEach循環(huán)。代碼如下：
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
array.forEach((it, i) => {
if (it >= 0) {
console.log(it) // 輸出：0
array.splice(i + 1, array.length - i)
}
})
三、建議
建議使用for和some
在日常工作中，一般是不會出現(xiàn)一種情況是讓你終止forEach循環(huán)的，如果有終止的情況，可以使用for和some方法。
for
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
for (let i = 0, len = array.length; i < len; i++) {
if (array[ i ] >= 0) {
console.log(array[ i ])
break
}
}
some
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
array.some((it, i) => {
if (it >= 0) {
console.log(it)
return true
}
})
到此這篇關(guān)于在JavaScript中終止forEach循環(huán)的三種方式的文章就介紹到這了,更多相關(guān)JavaScript終止forEach循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實現(xiàn)頁面動態(tài)驗證碼的實現(xiàn)示例
這篇文章主要介紹了JavaScript實現(xiàn)頁面動態(tài)驗證碼的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的迭代器模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要是對Javascript中難以理解的11個問題進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)裁剪圖片大小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細介紹了原生JS京東輪播圖代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07
JavaScript onclick與addEventListener使用的區(qū)別介紹
addEventListener()方法用于向指定元素添加事件句柄，使用 removeEventListener()方法來移除，onclick和addEventListener事件區(qū)別是：onclick事件會被覆蓋，而addEventListener可以先后運行不會被覆蓋，addEventListener可以監(jiān)聽多個事件2022-09-09
微信小程序使用wx.chooseLocation開發(fā)地圖怎么做
這篇文章主要介紹了微信小程序使用wx.chooseLocation開發(fā)地圖流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
這篇文章主要為大家詳細介紹了JavaScript簡易購物車功能的編寫代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09