跳出forEach循环--冰山工作室--前端--沙翼

原创 qqkillqq2016 教程 javascript 100阅读 2019-03-18 10:30:19 举报

点击查看视频课程:如何跳出forEach循环

我们都知道,在使用for循环的时候可以使用break 或者return语句来结束for循环(return直接结束函数),但是如果使用forEach循环如何跳出循环呢?

尝试使用break 和return

首先尝试一使用return语句----木有效果
使用return:

再尝试一下使用break语句----报错
使用break:

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的实现方式用代码表示出来可以写成如下的结构

使用return语句相当于在每个自执行函数中将返回值复制给rs,但是实际对整个函数并没有影响。而使用break语句报错是因为,在JS的解释器中break语句是不可以出现在函数体内的

如何变通跳出forEach循环

MDN官方推荐的方法
使用some 和 every
every在碰到return false的时候,中止循环。some在碰到return true的时候,中止循环。
使用some和every的代码如下:

其他方法
1.使用for循环或者for in 循环代替

2.使用throw抛出异常

3.使用判断跑空循环

这样做有两个问题,第一个问题,全局增加了一个tag变量,第二个问题,表面上看是终止了forEach循环,但是实际上循环的次数并没有改变,只是在不满足条件的时候callback什么都没执行而已。
先来解决第一个问题,如何删除全局下新增的tag变量 。实际上forEach还有第二个参数,表示callback的执行上下文,也就是在callback里面this对应的值。因此我们可以将上下文设置成空对象,这个对象自然没有tag属性,因此访问this.tag的时候会得到undefined
不增加全局变量的代码如下:

4.修改索引

关于修改索引终止循环的讲解:

forEach的执行细节
1.遍历的范围在第一次执行callback的时候就已经确定,所以在执行过程中去push内容,并不会影响遍历的次数,这和for循环有很大区别,下面的两个案例一个会造成死循环一个不会

下面的这行代码则不会造成死循环

2.如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。

3.已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()),之后的元素将被跳过。

在满足条件的时候将后面的值截掉,下次循环的时候找不到对应的值,循环就结束了,这就是修改索引能够中止forEach循环的原因。
但是这样操作会破坏原始的数据,因此我们可以使用一个小技巧,即将数组从0开始截断,然后重新赋值给数组,也就是使用 array=array.splice(0)。

关于 冰山工作室

QQ群:600633658

加入我们,前端大佬在线答疑解惑,带你深入了解前端知识。

视频课程网盘地址 提取码 558x

学习资料将在 冰山工作室 各平台官方账户同步更新, 直通车⤵️
冰山工作室官网
知乎
掘金
微博
前端网
思否
简书
新闻头条
喜马拉雅


评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复