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

最新推荐文章于 2023-12-08 10:28:59 发布

转载最新推荐文章于 2023-12-08 10:28:59 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/Amnesiac666/article/details/121649962

文章标签：

#javascript

文章讨论了在JavaScript中使用forEach循环时，return和break无法正常结束循环的问题。解释了forEach的return仅终止本次循环而继续下一个，而for循环的return和break可直接跳出。提出了使用try-catch、some()、every()等替代方案来实现类似功能。

背景：在使用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;  
    }
}

有什么区别？

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

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

如何在forEach中直接退出循环

使用try catch 捕获异常。

使用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

总结：