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
}