你知道 JS 中断循环有哪些吗？除了 for 循环的 break,还有哪些可以中断循环？接下来笔者以实际业务例子，分享几种能中断循环的方案
forEach
在实际业务中你可能会写以下的业务代码，举个栗子，在一个循环表单域中，你需要内容为空，就禁止提交
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后，后面语句都不会执行。
