一次项目中使用forEach进行遍历,达到某一条件,希望跳出循环,代码不继续执行。

this.tableData.forEach((item, index)=>{
    if (item.value=== 1) {
       return
    }

for循环使用return可以跳出循环

<script>
 let a=[1,2,3];
  let b=[4,5,6,7,8];
   function test(){
        for(var i=0;i<a.length;i++){
            for(var j=0;j<b.length;j++){
                if(b[j]===5){
                    // break
                    return false;
                }else{
                    console.log('13');
                }
            }
            
            console.log('12');
        }
        console.log('14');
    }
    

    test();//打印结果为:13,第一次是b[4]等于4,不等于5,所以输出13,第二次b[1]等于5,所以return结束

</script>

我们再分别使用for循环和forEach方法来验证:

(function() {
    let arr = [1,2,3,4,5]
    for(let i =0; i < arr.length; i++) {
        console.log(arr[i])
        if(arr[i] == 3) {
            return
			console.log('for')
        }
    }
})();
console.log('---------------------');
(function(){
    let arr = [1,2,3,4,5]
    arr.forEach(item => {
        console.log(item)
        if(item == 3) {
            return
			console.log('forEach')
        }
    })
})();

结果:
forEach()中的return只会结束此次循环,执行下一次循环
for中的return会直接跳出循环,不再执行下面的循环

在这里插入图片描述
再来测试通过判断条件从而得到一个值返回出去,先来看看效果吧

console.log((function() {
    let arr = [1,2,3,4,5]
    for(let i =0; i < arr.length; i++) {
    if(arr[i] == 3) {
        return i
    }
    }
})());
console.log('---------------------');
console.log((function(){
    let arr = [1,2,3,4,5]
    arr.forEach(item => {
        if(item == 3) {
        return item
        }
    })

打印结果如图:

在这里插入图片描述
显然:Array的forEach()方法是不能return出去返回值的。

我的解决办法是:定义一个变量,把我想返回的值保存下来,最后返回出去 (最佳方法待补充)

(function(){
    let arr = [1,2,3,4,5]
    let temp = ""
    arr.forEach(item => {
        if(item == 3) {
            temp = item
    }
    })
    return temp
})();

控制台打印结果:

在这里插入图片描述
如图成功拿到符合判断条件的这个数了

因此要达到所需效果,可以使用for循环,然后就可以使用break,continue,或者return跳出遍历。如果是想返回某个值且一定要使用foreach,那可以保存到某个临时变量,然后在循环体外把这个值传递出去

总结:

1.forEach 无法在所有元素都传递给调用的函数之前终止遍历 / 在forEach方法里 return 无效。且不会有返回值。

2.使用其它写法:for循环、some()、every()、find()、findIndex()…

官方解释:
在这里插入图片描述


那么拓展一下,使用break会怎么样?
forEach():

let arr = ['1','2','3','4'];
arr.forEach((item) => {
    console.log("foreach",item);
    if (item === '2') {
        break ;  // 会报错
    }
});

for():

let arr = ['1','2','3','4'];
for (let i = 0; i < 4; i++) {
   console.log("arr",arr[i]); 
    if (arr[i] === '2') {
        break ;
    }
 
}
 
/*
 * arr 1
 * arr 2
 */
 

可以看到forEach()中使用break会报错,在for()中使用break与return效果一样,都是直接跳出循环,但是要使用return,for循环必须在一个函数中

如何在forEach()中直接退出循环

使用try{} catch() {} 捕获异常实现:

let arr = ['1','2','3','4'];
try {
    arr.forEach((item) => {
        if (item === '2') {
            throw new Error("退出循环");
        }
        console.log("foreach",item);
    });
} catch (e) {
    if (e.message === "退出循环") {
        console.log("结束了");
    } else {
        console.log(e.message);
    }
}
/*
 *foreach 1
 *结束了
 */

或者使用 some 或者 every 代替 forEach:

  • some:对数组中每一项运行给定函数,只要有一项返回true,就会跳出循环 ;
  • every:对数组中每一项运行给定函数,只要每一项都返回true,函数返回true ,所以只要有一项不是true就会退出循环;
let flag = arr.some((item) => {
    console.log("arr",item); 
    if (item === '2') {
        return true;
    }
});
console.log(flag); 
/*
 *arr 1
 *arr 2
 *true
 */
let flag = arr.every((item) => {
    console.log("arr",item);
    if (item !== '2') {
        return true;
    }
});
console.log(flag);
/*
 *arr 1
 *arr 2
 *false
 */

参考文章:
https://blog.csdn.net/DZY_12/article/details/109775047

js foreach循环使用return跳出循环及返回值无效 for循环使用有效
标签: