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

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

一次项目中使用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