【视频教程】如何中断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站