在JavaScript中終止forEach循環(huán)的三種方式
一、序言
這個問題估計會難倒一部分同學(xué)。甚至?xí)腥朔磫枺?code>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相當(dāng)于就是函數(shù)的執(zhí)行，比如下面這段代碼，即使func1執(zhí)行了return語句，仍然會打印出2。
const func1 = () => {
console.log(1)
return
}
const func2 = () => {
func1()
console.log(2)
}
func2()
二、方法
然而，我能想到三種方式可以終止forEach循環(huán)。
01. 拋出錯誤
當(dāng)找到一個大于等于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ù)組元素移除
當(dāng)滿足條件時，使用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常用代碼段，都是平時項目中需要用到的,需要的朋友可以參考下2014-12-12
阻塞渲染就是在頁?中我們通常會引?外部?件，?瀏覽器在解析HTML頁?是從上到下依次解析、渲染，如果<head>中引?了?個a.js?件，?這個?件很?或者有問題，需要2秒加載，那么瀏覽器會停?渲染頁?，2秒后加載完成才會繼續(xù)渲染，這個就是阻塞2022-06-06
JavaScript正則替換HTML標(biāo)簽功能示例
這篇文章主要介紹了JavaScript正則替換HTML標(biāo)簽功能,結(jié)合完整實例形式詳細(xì)分析了javascript正則替換字符串操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JavaScript中for-in和for-of的不同之處及如何正確使用
這篇文章主要給大家介紹了關(guān)于JavaScript中for-in和for-of的不同之處及如何正確使用它們的相關(guān)資料,無論是for...in還是for...of語句都是迭代一些東西,它們之間的主要區(qū)別在于它們的迭代方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
JavaScript利用Immerjs實現(xiàn)不可變數(shù)據(jù)
Immerjs?是一個用于管理?JavaScript?不可變數(shù)據(jù)結(jié)構(gòu)的庫，它可以幫助我們更輕松地處理狀態(tài)的變化，并減少冗余代碼。本文就來帶大家揭秘如何利用Immerjs實現(xiàn)不可變數(shù)據(jù)，感興趣的可以了解一下2023-04-04
JS利用原生canvas實現(xiàn)圖形標(biāo)注功能
這篇文章主要為大家詳細(xì)介紹了JS如何利用原生canvas實現(xiàn)圖形標(biāo)注功能,支持矩形、多邊形、線段、圓形等已繪制的圖形進(jìn)行縮放,移動,需要的可以參考下2024-03-03
JavaScript代碼異常監(jiān)控實現(xiàn)過程詳解
這篇文章主要介紹了JavaScript代碼異常監(jiān)控實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
Three.js材質(zhì)與光照知識點總結(jié)(附詳細(xì)代碼)
隨著人們對用戶體驗越來越重視,Web開發(fā)已經(jīng)不滿足于2D效果的實現(xiàn),而把目標(biāo)放到了更加炫酷的3D效果上,這篇文章主要介紹了Three.js材質(zhì)與光照知識點的相關(guān)資料,需要的朋友可以參考下2025-06-06
JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實現(xiàn)代碼
這篇文章主要介紹了JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)鐘表案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01