紀錄 Typescript forEach 如何跳出迴圈
C# 寫習慣之後要寫 TS 有些不習慣，在 TS forEach 中是不能使用 break 或 continue，只能使用 return，這對要從迴圈中跳出有些不便，先來看使用 return 跳出迴圈的結果
跳出單次迴圈
const arr1 = [1, 2, 3]
arr1.forEach(val => {
if (val === 2) return
console.log(val)
})
// output
// 1
// 3
當迴圈符合條件時會執行 return，以結束此次迴圈，return 之後的程式碼不執行，但是此次之後的迴圈依然會繼續執行
跳出整個迴圈
若要直接結束掉整個迴圈需要利用 try catch 來攔截例外狀況，並且擲回例外
try {
arr1.forEach(val => {
if (val === 2)
throw new Error()
console.log(val)
})
} catch (err) {
console.log("err:" + err)
}
// output
// 1
// err:Error
使用 try catch 包住迴圈，當迴圈內符合條件時會扔出例外，使用 catch 來攔截例外，觀察輸出發現迴圈已被中止，成功跳出整個迴圈，扔出例外後，後續迴圈皆不會執行
What about nested loops ?
先使用 return 觀察，用一個變數紀錄迴圈次數，每迭代一次就加一
const arr1 = [1, 2, 3]
const arr2 = [2, 4, 6]
let num = 0;
arr1.forEach(v1 => {
arr2.forEach(v2 => {
num++
if (v1 === v2) return
console.log(num)
})
})
// output
// 1
// 2
// 3
// 5
// 6
// 7
// 8
// 9
結果跟第一種情況情形一樣，迭代到第四次時，因符合條件所以該次迴圈跳出，之後無論內外層迭代還是會繼續執行
這次使用 try catch 包住內層迴圈，並將 return 替換成擲出例外狀況，當迭代到第四次時，我們攔截到例外，且內層後續的迭代被中止，但外層迴圈會持續執行
let num1 = 0;
let num2 = 0;
arr1.forEach(v1 => {
console.log("num1:" + ++num1)
try {
arr2.forEach(v2 => {
num2++
if (v1 === v2)
throw new Error() // 結束內層迴圈
console.log(" num2:" + num2)
})
} catch (err) {
console.log(" err:" + err)
}
})
// output
// num1:1
// num2:1
// num2:2
// num2:3
// num1:2
// err:Error
// num1:3
// num2:5
// num2:6
// num2:7
所以要如何才能結束整個巢狀迴圈？
很簡單，只要把 try catch 移到外面包住外層迴圈，這樣當內層迴圈擲出例外後，整個巢狀迴圈就會被中止
try {
arr1.forEach(v1 => {
console.log("num1:" + ++num1)
arr2.forEach(v2 => {
num2++
if (v1 === v2)
throw new Error()
console.log(" num2:" + num2)
})
})
} catch (err) {
console.log(" err:" + err)
}
// output
// num1:1
// num2:1
// num2:2
// num2:3
// num1:2
// err:Error
有個但書！雖然使用 try catch 可以攔截例外是一種中止迴圈的手段，當迴圈過大時，被 try catch 包覆住的迴圈將無法避免性能下降。所以，若有必要中止 forEach 執行，應該要使用其他語法來替代，因為上述的 try catch 絕對不是最佳解答
下篇會記錄如何使用其他語法來取代使用攔截例外中止迴圈的方法
Thanks for reading the article 🌷 🌻 🌼
If you like it, please don't hesitate to click heart button ❤️
or follow my GitHub ⭐
or buy me a coffee ⬇️ I'd appreciate it.
Top comments (0)