js 的 forEach 循环中使用 return 不能跳出循环

我们都知道 for 循环里要跳出整个循环是使用 break，但在数组中用 forEach 循环如要退出整个循环呢？使用 break 会报错，使用 return 也不能跳出循环。那么在用 forEach() 遍历数组时要如何才能跳出循环呢？

第一种：使用 for 循环代替 forEach

在平时的项目中，我们大多数都是封装的函数，然后传参调用的。如下：

var arr=[1,2,3,4,5];
function fun(arr){
    for(var i = 0; i<arr.length; i++){
        if(arr[i]==3){
            return
        }
        console.log(arr[i])
    }
}
fun(arr);

控制台结果为：

image

直接使用 for 的话，只能用 break，不能使用 return，因为 return 是针对函数使用的，如下：

var arr=[1,2,3,4,5];

for(var i = 0; i<arr.length; i++){
    if(arr[i]==3){
        break
    }
    console.log(arr[i])
}

控制台结果为：

image

第二种：使用arr.some()或者arr.every()替代(注意里面 return 的返回值)

some()当内部 return true 时跳出整个循环：

var arr=[1,2,3,4,5];
arr.some(function(val,i){
    if(val==3){
        //注意这里不能是return或者return false，一般写return true(写return 1 也行，意思一样)
        return true;
    }
    console.log(val)
})

every()当内部 return false 时跳出整个循环(注意写法，有点特别)

var arr=[1,2,3,4,5];

arr.every(function(val,i){
    if(val==3){
        return false;    //注意这里是return false 
    }else{    
        console.log(val);
        return true;    //注意这里的 return true 必须加上，不然会异常(打印不出2)
    }
})

控制台结果为：

image.png

如果代码为：

var arr=[1,2,3,4,5];

arr.every(function(val,i){
    if(val==3){
        return false;
    }
    console.log(val)
})

那么控制台的打印结果为：

image

是不是很诡异？竟然没有打印出来2！

加上 return true 之后：

arr.every(function(val,i){
    if(val==3){
        return false;
    }
    console.log(val);
    return true;
})

控制台结果：

image

此时打印结果才正常。(所以为了代码美观，把后面的 console.log(val); return true; 放到了 else 里面)

1.return false：相当于终止符，干了3件事，阻止默认行为，取消事件冒泡，以及停止回调执行立即返回；

2.return：停止回调执行立即返回；

3.return true：相当于执行符，继续执行下面语句。