JS 的 Array.forEach 方法如何跳出循环

2024-04-10 03:28

本文主要是介绍JS 的 Array.forEach 方法如何跳出循环,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. for 结束循环

众所周知,在 for 循环语句中,遇到 break 会结束循环。但是如何在数组方法 array.forEach() 中如何结束循环呢 ?

 
  1. const arr = ['html', 'css', 'js', 'vue', 'php']
  2. for (let i = 0; i < arr.length; i++) {
  3. // 第一次循环输出: html
  4. // 第二次循环输出: css
  5. // 第三次循环输出: js
  6. console.log(arr[i]);
  7. // 第三次循环时,条件成立,停止循环
  8. if (arr[i] == 'js') break;
  9. }
2. forEach 结束循环

forEach 本身无法跳出循环,但是我们可以通过系统的一些强制性方法使其结束循环,如下所示:

 
  1. try {
  2. arr.forEach(item => {
  3. if (item == 'js') throw new Error('结束循环');
  4. })
  5. } catch (error) {
  6. console.log(error.message);
  7. }

上面写法存在问题,当循环中有一些其他异常时,理应抛出异常,而不是认为是结束循环的异常。改进后:

 
  1. try {
  2. arr.forEach(item => {
  3. console.log(item);
  4. if (item == 'css') item + a; // a is not defined
  5. if (item == 'js') throw new Error('结束循环');
  6. })
  7. } catch (error) {
  8. if (error.message !== '结束循环') {
  9. throw error;
  10. }
  11. }
3. 利用高阶函数进行循环

Array.some() 方法用于检测数组中的元素是否满足指定条件,有一个满足就停止循环,然后返回 true

也就是闭包函数的返回值为 true 时,停止循环。利用这一特性,可以控制循环中何时返回 true,进行控制何时结束循环

 
  1. const arr = ['html', 'css', 'js', 'vue', 'php']
  2. arr.some(item => {
  3. // 循环三次,依次输出 html css js
  4. console.log(item);
  5. if (item == 'js') {
  6. return true
  7. }
  8. })

Array.every() 方法用于检测数组中的所有元素是否满足指定条件,有一个不满足就停止循环,然后返回 false

同理,通过控制返回值,一样能控制何时结束循环

 
  1. const arr = ['html', 'css', 'js', 'vue', 'php']
  2. arr.every(item => {
  3. // 循环三次,依次输出 html css js
  4. console.log(item);
  5. if (item == 'js') {
  6. return false
  7. }
  8. return true
  9. })
4. 开发中到底应该使用哪种方式

开发中,遇到需要循环一个数组,并且当循环到某一个元素时要跳出循环,建议书写方式如下所示:

 
  1. const arr = ['html', 'css', 'js', 'vue', 'php']
  2. // 推荐方式一
  3. for (let i = 0; i < arr.length; i++) {
  4. if (arr[i] == 'js') {
  5. break;
  6. }
  7. }
  8. // 推荐方式二
  9. arr.some(item => {
  10. if (item == 'js') {
  11. return true
  12. }
  13. })

这篇关于JS 的 Array.forEach 方法如何跳出循环的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/889954

相关文章

QT移植到RK3568开发板的方法步骤

《QT移植到RK3568开发板的方法步骤》本文主要介绍了QT移植到RK3568开发板的方法步骤,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录前言一、获取SDK1. 安装依赖2. 获取SDK资源包3. SDK工程目录介绍4. 获取补丁包二

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使

Linux虚拟机不显示IP地址的解决方法(亲测有效)

《Linux虚拟机不显示IP地址的解决方法(亲测有效)》本文主要介绍了通过VMware新装的Linux系统没有IP地址的解决方法,主要步骤包括:关闭虚拟机、打开VM虚拟网络编辑器、还原VMnet8或修... 目录前言步骤0.问题情况1.关闭虚拟机2.China编程打开VM虚拟网络编辑器3.1 方法一:点击还原VM

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Java捕获ThreadPoolExecutor内部线程异常的四种方法

《Java捕获ThreadPoolExecutor内部线程异常的四种方法》这篇文章主要为大家详细介绍了Java捕获ThreadPoolExecutor内部线程异常的四种方法,文中的示例代码讲解详细,感... 目录方案 1方案 2方案 3方案 4结论方案 1使用 execute + try-catch 记录

Python中Windows和macOS文件路径格式不一致的解决方法

《Python中Windows和macOS文件路径格式不一致的解决方法》在Python中,Windows和macOS的文件路径字符串格式不一致主要体现在路径分隔符上,这种差异可能导致跨平台代码在处理文... 目录方法 1:使用 os.path 模块方法 2:使用 pathlib 模块(推荐)方法 3:统一使

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

JAVA SE包装类和泛型详细介绍及说明方法

《JAVASE包装类和泛型详细介绍及说明方法》:本文主要介绍JAVASE包装类和泛型的相关资料,包括基本数据类型与包装类的对应关系,以及装箱和拆箱的概念,并重点讲解了自动装箱和自动拆箱的机制,文... 目录1. 包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱1.3 自动装箱和自动拆箱2. 泛型2

C# 委托中 Invoke/BeginInvoke/EndInvoke和DynamicInvoke 方法的区别和联系

《C#委托中Invoke/BeginInvoke/EndInvoke和DynamicInvoke方法的区别和联系》在C#中,委托(Delegate)提供了多种调用方式,包括Invoke、Begi... 目录前言一、 Invoke方法1. 定义2. 特点3. 示例代码二、 BeginInvoke 和 EndI