forEach中return会退出循环吗

简介: forEach中return会退出循环吗

forEach循环

在JavaScript中的forEach循环中使用return语句,并不会退出或终止循环,forEach循环会继续执行完剩余的所有迭代。

forEach循环中的return语句只会从当前的迭代回调函数中返回,而不会中断整个循环。 举例来说:

const array = [1, 2, 3, 4, 5];
array.forEach(num => {
  if (num === 3) {
    return;
  }
  console.log(num); 
});
// 输出:
// 1
// 2
// 4
// 5

当num等于3时,return语句只会从当前迭代的回调函数返回,forEach循环仍会继续执行,输出4和5。

return可以跳出的循环

在JavaScript中,以下几种循环使用return语句可以退出/中断整个循环的执行:

  1. for循环

在for循环中,return会完全退出循环,中断后续的所有迭代:

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    return;
  }
  console.log(i);
}
// 输出 0 1 2
  1. for...in循环

return也会立即退出for...in循环:

for (let i in obj) {
  if (i === 'foo') {
    return;
  }
  // ...
}
  1. for...of循环

return会跳出for...of循环:

for (let x of array) {
  if (x === 'bar') { return; }
  // ...
} 
  1. while循环

在while循环里return会中断循环:

while (i < 5) {
  if (i === 3) {
    return; 
  }
  i++;
}
  1. do...while循环

return也会中断do...while循环:

do {
  if (i === 3) {
    return;
  }
  i++;  
} while (i < 5);

for、while、do...while循环以及for...in、for...of循环,都可以通过return语句中断并退出循环。只有forEach循环的return不能退出整个循环。如果你的代码有跳出循环的操作,最好不要选择foreach循环。

foreach跳出循环的方法

在forEach循环中如果想要提前退出整个循环,有以下几种方法:

  1. 使用return + 标签语句
outer: forEach(items, item => {
  if(condition) {
    return outer; // 跳出forEach循环
  }
})

通过return一个标签outer,可以跳出外层的forEach循环。

  1. 抛出异常


forEach(items, item => {
  if(condition) {
    throw new Error('Quit loop'); // 抛出异常停止循环
  }
})

throw一个错误可以停止forEach循环,但是不太推荐,容易造成难以跟踪的bug。

  1. 使用some()方法
items.some(item => {
  if(condition) {
    return true; // some()遇到true就停止循环
  }
})

some()里return true会退出整个循环。

  1. 使用break + IIFE
items.forEach(item => {
  (function() {
    if(condition) {
      break; // 跳出IIFE从而退出forEach
    }
  })(); 
})

用立即执行函数IIFE包含break语句,跳出IIFE从而停止forEach循环。

  1. 转换为for/while循环

所以forEach循环内部最好不要使用return、break等语句强制退出。 可以用上面其他方法退出,或者直接转换为普通for/while循环。

目录
相关文章
|
7月前
|
Java C++ 开发者
在 VS Code 里直接改 JAR,我复刻了JarEditor
VS Code 插件 JarEditor,让你直接浏览、编辑、反编译并回写 JAR 文件——无需解压/打包!支持查看目录、修改文本、.class 反编译与重编译、增删文件等。Java 开发者快速查包、验配置、做临时验证的利器。开源免费,搜索安装即可使用。
781 1
在 VS Code 里直接改 JAR,我复刻了JarEditor
|
前端开发 JavaScript
前端 js 经典:Promise
前端 js 经典:Promise
516 1
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
4637 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
JSON JavaScript 前端开发
springboot中使用knife4j访问接口文档的一系列问题
本文介绍了在Spring Boot项目中使用Knife4j访问接口文档时遇到的一系列问题及其解决方案。作者首先介绍了自己是一名自学前端的大一学生,熟悉JavaScript和Vue,正在向全栈方向发展。接着详细说明了如何解决Swagger请求404错误,包括升级Knife4j依赖、替换Swagger 2注解为Swagger 3注解以及修改配置类中的代码。最后,针对报JS错误的问题,提供了删除消息转换器代码的解决方法。希望这些内容能对读者有所帮助。
3698 5
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
2121 0
|
JSON 数据可视化 JavaScript
Echarts地图实现:山东省会员活跃度
使用ECharts展示山东会员活跃度,通过散点图和地图结合,颜色对比强烈,背景深蓝(#020933)、点色明亮黄(#F4E925)。核心代码示例展示了散点、地图及特效散点系列配置。[点击下载](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89493130)代码和数据。
664 0
Echarts地图实现:山东省会员活跃度
|
JavaScript
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
Vue子组件调用父组件方法并传参的5种方式:$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun