你不知道的JS循环中断
你知道 JS 中断循环有哪些吗？除了 for 循环的 break,还有哪些可以中断循环？接下来笔者以实际业务例子，分享几种能中断循环的方案，希望你在实际业务中能用得上。
forEach
在实际业务中你可能会写以下的业务代码，举个栗子，在一个循环表单域中，你需要内容为空，就禁止提交
// 1.js
const shopList = [{title: 'Apple', price: 10}, {title: 'banana', price: ''},{title: 'orange', price: 5}]
以上是一组数组源，于是你的思路可能会这样
// 1.js
const hasPriceEmpty = (arr) => {
bool = false; // 默认都不是空
arr.forEach(v => {
if (v.price === '') {
bool = true;
break;
}
console.log(v);
});
return bool;
};
const handleSubmit = () => {
if (hasPriceEmpty(shopList)) {
return;
}
// 下面的继续业务操作
console.log('go on...');
}
handleSubmit();
运行测试命令node 1.js，报错了!
于是你把break改成return
你会发现并没有打印go on...,确实是hasPriceEmpty这个方法已经达到了自己的业务要求,但是打印出了第一组和第三组数据。
于是mdn上关于 forEach 有这么一段话，Note: 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.
大概意思就是除了抛出异常，break 无法中断循环，如果你想有中断行为，forEach不是一个好办法。
于是你想中断循环，你改了下代码
...
const hasPriceEmpty = (arr) => {
bool = false; // 默认都不是空
arr.forEach(v => {
if (v.price === '') {
bool = true;
throw new Error('给我中断循环吧')
}
try {
console.log(v)
} catch(e) {
console.log(e);
console.log(v)
}
});
return bool;
};
对不起，页面只打印了第一组数据，且页面抛出了异常
我确实做到了中断forEach循环异常了，但是这个错误作为一个强迫症患者，我是不能接受的(throw抛出的异常，记得try catch中捕获)。
for循环break中断
这是笔者认为大部分人都能想到的办法
const shopList = [{ title: 'Apple', price: 10 }, { title: 'banana', price: '' }, { title: 'orange', price: 5 }];
const hasPriceEmpty = (arr) => {
let bool = false; // 默认都不是空
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i].price === '') {
bool = true;
break;
}
console.log(arr[i]);
}
return bool;
};
const handleSubmit = () => {
if (hasPriceEmpty(shopList)) {
return;
}
// 下面的继续业务操作
console.log('go on...');
}
handleSubmit();
结果很令人欢喜，完美
通常这种方式用得最多，但是作为老司机，你还需要掌握多一点其他方法。于是中断循环还有...
while 循环中断
...
const hasPriceEmpty = (arr) => {
let bool = false; // 默认都不是空
let index = 0
while (index < arr.length) {
index++;
console.log(arr[index], '000');
if (arr[index].price === '') {
bool = true;
break
}
console.log(arr[index], '111');
}
return bool;
};
...
结果喜大普奔，依然可以，测试结果如下
这已经达到我们想要的效果了。
利用iterable迭代器，for...of 中断循环
这里iterable是指具有该特性的迭代器，比如Array、Map、Set
Array
...
const hasPriceEmpty = (arr) => {
let bool = false; // 默认都不是空
for (let item of arr) {
if (item.price === '') {
bool = true;
break;
}
console.log(item, '111');
}
return bool;
};
...
于是测试结果依旧ok
为什么数组可以用for..of循环，你可以在控制台打印注意到
原来默认申明的[]原型链上有一个这样的iterator的迭代器,所以你可以利用iterator的特性，用for...of中断循环
Map
...
const hasPriceEmpty = (arr) => {
let bool = false; // 默认都不是空
const map = new Map();
// 将数据设置到Map中
arr.forEach(item => {
map.set(item.title, item);
})
for (let s of map) {
console.log(s, '000')
if (s[1].price === '') {
bool = true;
break;
}
console.log(s, '111');
}
return bool;
};
...
结果如下
以上代码也等价于
const sourceData = [{ title: 'Apple', price: 10 }, { title: 'banana', price: '' }, { title: 'orange', price: 5 }];
const shopList = new Map([sourceData]);
const hasPriceEmpty = (arr) => {
let bool = false; // 默认都不是空
for (let s of arr) {
console.log(s, '000')
if (s[1].price === '') {
bool = true;
break;
}
console.log(s, '111');
}
return bool;
};
const handleSubmit = () => {
if (hasPriceEmpty(shopList)) {
return;
}
// 下面的继续业务操作
console.log('go on...');
}
handleSubmit();
验证结果如下：
利用Map有iterable的可迭代性，通过for...of中断循环,具体可以在控制台下验证
Set
同样是一个栗子举证
const shopList = [{ title: 'Apple', price: 10 }, { title: 'banana', price: '' }, { title: 'orange', price: 5 }];
const hasPriceEmpty = (arr) => {
let bool = false; // 默认都不是空
const setArr = new Set([...shopList]);
for (let s of setArr) {
console.log(s, '000')
if (s.price === '') {
bool = true;
break;
}
console.log(s, '111');
}
return bool;
};
const handleSubmit = () => {
if (hasPriceEmpty(shopList)) {
return;
}
// 下面的继续业务操作
console.log('go on...');
}
handleSubmit();
输出验证结果：
Set与Map一样，可以在控制台验证一下iterable属性，我就不验证了，呜呜。
总结
forEach的中断循环可以抛异常来达到目的，但是不适合此业务场景for循环通用大法，break可以终止循环while循环,break也可以终止循环iterable特征的可迭代器，for...of，break中断循环，并且最重要的一点是在break后，当前索引条件不会继续执行，也就是for...of中，执行break后，后面语句都不会执行。 源码地址：https://github.com/maicFir/lessonNote-js/tree/master/lessonNote-js/js/01
腾讯云开发者
