js forEach 使用return跳出循环及返回值无效

背景：在使用forEach，当循环满足某个条件跳出循环，结果不生效。

let arr = [1,2,3,4,5]
arr.forEach((ele,index)=>{
console.log('forEach',ele) // 1,2,3,4,5
    if(ele === 1){
         return;       
     }
}

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

通过上述例子可以看出，返回结果是不一样的，使用for 循环是可以正常return结束循环，使用forEach却不能。

那么扩展一下，使用breack呢？会发现使用break 会报错。

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

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

有什么区别？

1. forEach 中的return，只会终止本次循环，继续执行下一次循环。

2. for中使用return，会直接跳出循环，不再执行下次循环。

如何在forEach中直接退出循环

1. 使用try catch 捕获异常。

2. 使用some 或者every代替forEach。

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

/*
 *foreach 1
 *结束了
 */

// 使用some 和every
let arr = [1,2,3,4,5,6]
let result = arr.some((item,index) =>{
    if(item == 2){
       return index;
    }
})
console.log('result--',result);// result-- false


let arr = [1,2,3,4,5,6]
let result = arr.every((item,index) =>{
    if(item == 2){
       return index;
    }
})
console.log('result--',result);// result-- false

总结：

1. forEach 中使用return 无效，且不会有返回值

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