踩坑 - Javascript的forEach和Jquery的each跳出循环问题

前言

昨天接到一个线上bug，公司内部的一个组件报出了警告，拉下线上代码review后发现是由于老代码的forEach没有在指定的条件下跳出循环导致的。

问题的提出

在Js中的forEach无法在所有元素都传递给调用的函数之前终止遍历。也就是说，没有像for循环中使用的相应的break语句。Jquery也是如此。

问题的解决

对于JavaScript的forEach

1. 可以使用for循环代替forEach

let a = [...];
for (let i = 0; i < a.length; i++) {
    if (...) {
        // break || continue; 
    }
}

2. forEach方法放在一个try块中，并能抛出一个异常。如果forEach调用的函数抛出foreach.break异常，循环会提前终止。

let a = [...];
try {
    a.forEach((e) => {
        if (...) {
            forEach.break = new Error('...');
        }
    })
} catch(e) {
    throw e;
}

对于Jquery的each

使用return来提前终止循环

jQuery中each类似于javascript的for循环
但不同于for循环的是在each里面不能使用break结束循环，也不能使用continue来结束本次循环，想要实现类似的功能就只能用return,return true 相当于continue，return false相当于break。

let a = [...];
a.each(() => {
    if (...) {
        // return false || return true
    }
})