js中常见的循环,都是怎么中止的?

本文讲述了在JavaScript中,如何在forEach等高阶循环中实现中止执行,包括使用throwError抛出错误以及通过修改数组长度或删除元素来提前结束循环,同时提到了避免直接使用return和break的局限性。
摘要由CSDN通过智能技术生成

前言: 前段时间,突然被同事问道:你知道forEach怎么样才可以中止吗?

在这里插入图片描述
突然被这么一问,是真够无语的,平时的开发还没太注意这个问题,所以就仔细的研究了一下,然后就有了这篇博客

基本循环:

js中最基本的循环,例如:for循环,while,do…while循环,这些都可以用 return | break 去中止当前的一个循环操作

直接上代码操作:

// for循环
for(let i=0; i<5; i++) {
    if(i == 3) {
        return
    }
    console.log(i);
}

// while 循环
let num = 0
while(num < 5) {
	if(num == 3) {
		// return
		break
	}
	console.log(num);
	num++
}

// do…while 循环
do {
    if(num == 0) {
        // break
		return
    }
    console.log(num);
    num++
} while(num < 5)

三个运行结果如下:都是 0,1,2
在这里插入图片描述

高阶循环:

然后就到了一些高阶的循环,例如:forEach,map,every,some等循环,但是发现,上面的 return | break 失效了
return:还能用,就直接跳过了当前判断
break:编译器直接报错不能使用

在这里插入图片描述

在这里插入图片描述

然后就一头雾水的去查文档,找度娘,终于找到了答案,原来这些方法,是披着羊皮的狼,只是执行了和循环一样的操作,他们的真名叫:迭代函数
现在总算是找到了问题的源头,然后就要思考,怎么让迭代函数中止执行
常见的函数执行体,结束执行的方法有两种:要么执行完毕,要么报出错误,我想让他中止,那抛出一个错误,不就可以了吗?有想法就要立即上手试试

let arr = [1,2,3,4,5,6]
arr.forEach(item => {
    if (item == 3) {
        // throw Error('中止循环')
        throw new Error('中止循环!')
    }
    console.log(item);
})

在这里插入图片描述

这次果然让循环停止执行了,但有个缺点是,也抛出了一个错误,这要是领导看到,不又多了一个被喷的理由吗?
为了不被领导喷,只能继续寻找下一个中止的方法,他循环的不就是一个数组嘛,我可以从数组下手,让他执行到中止的地方,给数组长度设置为 0 | 或者删除未循环的所有项,能不能中止循环?继续尝试

// 数组长度设置为 0
arr.forEach((item, index) => {
    if (item == 3) {
        arr.length = 0
    }
    console.log(item);
})
// 清除数组后面所有项
arr.forEach((item, index) => {
    if (item == 3) {
        arr.splice(index, arr.length - 1)
    }
    console.log(item);
})

不出以外的话,想法很成功,循环就被中止了,还没有上面的报错,其他的循环(map,some,every,find)同理
在这里插入图片描述

看完点个赞啦,不定期分享前端踩过的坑,一起成长!收工

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值