【視頻教程】如何中斷forEach循環-冰山工做室-沙翼-web前端

課程視頻--如何中斷forEach循環

在使用for循環的時候可使用break 或者return語句來結束for循環（return直接結束函數），可是若是使用forEach循環如何跳出循環呢？

嘗試使用break 和return

首先嚐試一使用return語句----木有效果

[1,2,3,4,5].forEach(item=>{
    if(item===2){
    return
    }
    console.log(item);
})

MDN給出的官方解釋

爲何會出現這樣的狀況？先看一下官方文檔的說明。
MDN文檔上明確說明forEach循環是不能夠退出的。

引自MDN
There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.
注意： 沒有辦法停止或者跳出 forEach() 循環，除了拋出一個異常。若是你須要這樣，使用 forEach() 方法是錯誤的。
若你須要提早終止循環，你可使用：
簡單循環
for...of 循環
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()

探究爲何break和return不行

先看看爲何return沒有效果，break報錯，forEach的實現方式用代碼表示出來能夠寫成以下的結構

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  const rs = (function(item) {
    console.log(item);
    if (item > 2) return false;
  })(arr[i])
}

使用return語句至關於在每一個自執行函數中將返回值複製給rs，可是實際對整個函數並無影響。而使用break語句報錯是由於再JS的解釋器中break語句是不能夠出如今函數體內的。

如何變通跳出forEach循環

MDN官方推薦的方法

// every在碰到return false的時候，停止循環。some在碰到return ture的時候，停止循環。
var a = [1, 2, 3, 4, 5]
a.every(item=>{
    console.log(item); //輸出：1,2
    if (item === 2) {
        return false
    } else {
        return true
    }
})
var a = [1, 2, 3, 4, 5]
a.some(item=> {
    console.log(item); //輸出：1,2
    if (item === 2) {
        return true
    } else {
        return false
    }
})

其餘方法

1.使用for循環或者for in 循環代替

2.使用throw拋出異常

try {
  [1, 2, 3, 4, 5].forEach(function(item) {
    if (item=== 2) throw item;
    console.log(item);
  });
} catch (e) {}

3.使用判斷跑空循環

var tag;
[1, 2, 3, 4, 5].forEach(function(item){
    if(!tag){
        console.log(item);
        if(item===2){
            tag=true;
        }
    }

這樣作有兩個問題，第一個問題，全局增長了一個tag變量，第二個問題，表面上看是終止了forEach循環，可是實際上循環的次數並無改變，只是在不知足條件的時候callback什麼都沒執行而已，先來解決第一個問題，如何刪除全局下新增的tag變量 。實際上forEach還有第二個參數，表示callback的執行上下文，也就是在callback裏面this對應的值。所以咱們能夠講上下文設置成空對象，這個對象天然沒有tag屬性，所以訪問this.tag的時候會獲得undefined

[1, 2, 3, 4, 5].forEach(function(item){
    if(!this.tag){
        console.log(item);
        if(item===2){
            this.tag=true;
        }
    }
},{})

4.修改索引

var array=[1, 2, 3, 4, 5]
array.forEach(item=>{
  if (item == 2) {
    array = array.splice(0);
  }
  console.log(item);
})

講解：

forEach的執行細節

1.遍歷的範圍在第一次執行callback的時候就已經肯定，因此在執行過程當中去push內容，並不會影響遍歷的次數，這和for循環有很大區別，下面的兩個案例一個會形成死循環一個不會

var arr=[1,2,3,4,5]
//會形成死循環的代碼
for(var i=0;i<arr.length;i++){
    arr.push('a')
}
//不會形成死循環
arr.forEach(item=>arr.push('a'))

2.若是已經存在的值被改變，則傳遞給 callback 的值是 forEach 遍歷到他們那一刻的值。

var arr=[1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(`time ${index}`)
    arr[index+1]=`${index}a`;
    console.log(item)
})

3.已刪除的項不會被遍歷到。若是已訪問的元素在迭代時被刪除了（例如使用 shift()），以後的元素將被跳過。

var arr=[1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(item)
    if(item===2){
        arr.length=index;
    }
})

在知足條件的時候將後面的值截掉，下次循環的時候照不到對應的值，循環就結束了，可是這樣操做會破壞原始的數據，所以咱們可使用一個小技巧，即將數組從0開始截斷，而後從新賦值給數組也就是array=array.splice(0)

---

原始高清視頻下載

視頻講解--提取碼: 558x

QQ答疑交流羣:
600633658

咱們的連接：

知乎 掘金 今日頭條 新浪微博 前端網 思否 簡書 B站