React前端js跳出ForEach循環的方式
今天踩了一個前端的坑。當forEach循環中滿足某個條件時候就不在循環了。內心第一反應 添加return false 或 return 搞定~ 但是代碼他依舊繼續循環。
最後找到問題所在,forEach跳出的方法是throw err次纔行,嚴格意義上說 map forEach 他們本身屬於迭代行爲 就不支持跳出的。當然這個throw err是使程序中斷-跳出。
總結了一下跳出所有循環的方法:
1.使用try catch 跳出forEach循環
try { var array = [1,2,3,4,5,6]; // 執行到第3次,結束循環 array.forEach((value)=>{ console.log("value---->",value); if(value > 3){ throw new Error("拋出異常跳出") } }); } catch(e) { console.log(e) };
2. 跳出for循環(沒有return方法)
- break 跳出所有循環
for(var i=1;i<=10;i++) { if(i==8) { //等於8跳出 break; } console.log(i) }
- continue 跳出當前循環,進入新的循環
for(var i=1;i<=10;i++) { if(i==8) { //等於8跳出 continue; } console.log(i) }
2.1.跳出 for in 循環(使用break)
let arr = [1,2,3,4,5,6] for (let i in arr){ if(i > 3) { break } console.log(arr[i]) //1 2 3 4 }
3. every 當內部return false時跳出整個循環
這個方法 說實在的我很少用 0-0 需要注意的是 every雖然通過return false 可以跳出循環,但是循環裏面你還是要寫return true 讓他持續循環 不然就只執行一次
//every()當內部return false時跳出整個循環 let list = [1, 2, 3, 4, 5]; list.every((value, index) => { if(value > 3){ console.log(value) return false; }else{ console.log(value) return true; //當然這邊如果你不寫這一行 她也會跳出的 就是上面說的 return true 爲了讓他進入下一次勳魂 } });
4. some 當內部return true時跳出整個循環
注意:return true 跳出整個循環 。 如果return false 跳出本次循環 和上面for break和continue方法相似
let list3 = [1, 2, 3, 4, 5]; list3.some((value, index) => { if(value === 3){ return true;//當內部return true時跳出整個循環 } console.log(value)// 1 2 });
5. ES6中 for of 跳出循環(使用break)
let arr = [1,2,3,4,5] for (val of arr) { if(val > 3 ){ break; } console.log("val===>",val) //1 23 }