三種在JavaScript中終止forEach循環的方式
面試官:你能停止 JavaScript 中的 forEach 循環嗎?這是我在面試中曾被問到的一個問題,我當初的回答是:“不,我不能這樣做。”
不幸的是,我的回答導致面試官突然結束了面試,對的,是突然結束的!
我對結果感到沮喪,問面試官:“為什么?實際上可以停止 JavaScript 中的 forEach 循環嗎?”
在面試官回答之前,我花了一些時間解釋我對為什么我們不能直接停止 JavaScript 中的 forEach 循環的理解。
一、序言
這個問題估計會難倒一部分同學。甚至會有人反問,forEach循環在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循環。 forEach相當于就是函數的執行,比如下面這段代碼,即使func1執行了return語句,仍然會打印出2。
const func1 = () => {
console.log(1)
return
}
const func2 = () => {
func1()
console.log(2)
}
func2()
二、終止方法
然而,我能想到三種方式可以終止forEach循環。
1. 拋出錯誤
當找到一個大于等于0的數字之后,return循環將終止執行,所以控制臺只會輸出數字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) {
}
2. 將數組長度設置成0
我們也能通過將數組長度設置成0來終止forEach循環。代碼如下
const array = [ -3, -2, -1, 0, 1, 2, 3 ]
array.forEach((it) => {
if (it >= 0) {
console.log(it) // 輸出:0
array.length = 0
}
})
3. 將數組元素移除
當滿足條件時,使用splice方法將數組內元素移除,也能終止forEach循環。代碼如下:
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
在日常工作中,一般是不會出現一種情況是讓你終止forEach循環的,如果有終止的情況,可以使用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
}
})
最后,3種關于在JavaScript中終止forEach循環的方法就先介紹到這里了,希望對你有所幫助,感謝你的閱讀,編程快樂!