脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS for与forEach跳出循环

JavaScript中for与forEach分别如何跳出循环

 更新时间：2024年01月08日 10:45:45   作者：swimxu  
forEach的优势一个是它的回调函数形成了一个作用域,它的curItem和i不会像for循环一样污染全局变量,这篇文章主要给大家介绍了关于JavaScript中for与forEach分别如何跳出循环的相关资料,需要的朋友可以参考下

for 循环

在 for 循环中，退出循环的两种方式：

  • break; 退出整个循环
  • continue; 退出当次循环
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < array.length; i++) {
 if (array[i] === 6) {
   // break; // 退出整改循环，
   continue; // 退出当次循环
 }

 // 其他操作...
 console.log('Loop:', array[i]);
}

// 某种情况下，也可以使用 return 完成终止循环

break 退出整个循环

continue 退出当次循环

forEach

在JavaScript中，forEach方法是用于遍历数组的方法，它会对数组中的每个元素执行指定的操作。

forEach方法本身并不提供直接的方式来跳出循环，但你可以使用一些技巧来跳出循环或模拟跳出循环的效果。

方法一：try{}catch(){} 结合 throw 抛错的方式退出循环

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
try {
  array.forEach((element) => {
    if (element === 6) throw new Error('End Loop!')
    // 其他操作
    console.log('Loop:', element)
  })
} catch (e) {
  console.log(e)
}

方法二：是使用一个标志变量，通过控制该变量的值来跳出循环

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 定义一个变量
let isBreak = false;
array.forEach((item) => {
  console.log("其实每次都会循环：", item);

  // 某个条件满足时设置 isBreak 为 true，方便跳出循环
  if (item > 4) {
    isBreak = true;
  }

  // 检查是否需要跳出循环
  if (isBreak) {
    return; // 终止当次循环，但会继续执行下一次循环，下一次循环会继续判断
  }

  // 其他操作...
  console.log('其他操作：', item);
});

在上述示例中，通过设置 isBreak 变量为 true，在下一次迭代开始之前使用 return 中断了当前的迭代，从而模拟了跳出循环的效果。

需要注意的是，这种方法只能跳出当前的迭代，而不能直接跳出整个 forEach 循环。如果你需要完全跳出 forEach 循环，可以考虑使用其他循环结构，如 for 循环或 while 循环，以便更好地控制循环的流程。

提到在一段程序中如果碰到需要终止，结束一个循环，函数或者一段代码，一般会想到以下这几个关键字return、continue、break

简述一下三者的区别：

  • break: 终止整个循环(有内层循环时终止的是内层循环)，退出switch语句；只能用于循环或者switch语句中，其他地方使用会报错
  • continue：与break相似，不同之处在于结束的是本次循环，相当于跳过本次循环执行下一次循环；只能用于while,do/while,for,for/in循环中，其他地方使用会报错
  • return: return false截断语句之后的代码执行，如果用于函数中，可以返回一个特点的值，做完函数的返回值；不能用在循环中

总结

到此这篇关于JavaScript中for与forEach分别如何跳出循环的文章就介绍到这了,更多相关JS for与forEach跳出循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅谈JS使用[ ]来访问对象属性

    浅谈JS使用[ ]来访问对象属性

    下面小编就为大家带来一篇浅谈JS使用[ ]来访问对象属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • Bootstrap常用组件学习(整理)

    Bootstrap常用组件学习(整理)

    这篇文章是小编日常收集整理的有关bootstrap 常用组件包括Bootstrap 面板（Panels），Bootstrap 多媒体对象（Media Object）知识，非常不错，需要的朋友参考下吧
    2017-03-03
  • ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】

    ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】

    这篇文章主要介绍了ES6常用小技巧,结合实例形式总结分析了ES6常见的数组去重、交换变量、合并数组、字符串反转、数组迭代、数值计算等相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • 用js实现输入提示(自动完成)的实例代码

    用js实现输入提示(自动完成)的实例代码

    用js实现输入提示(自动完成)的实例代码，需要的朋友可以参考一下
    2013-06-06
  • js 定位到某个锚点的方法

    js 定位到某个锚点的方法

    下面小编就为大家带来一篇js 定位到某个锚点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 基于JS实现带动画效果的流程进度条

    基于JS实现带动画效果的流程进度条

    当在使用流程的时候，比如有一个审核流程，有三个阶段：开始，审核中，审核成功。当在不同的阶段，做相应的进度显示，当显示时，是以动画的形式显示的。下面通过代码给大家介绍JS实现带动画效果的流程进度条，感兴趣的朋友一起看看吧
    2018-06-06
  • js的math中缺少的数学方法小结

    js的math中缺少的数学方法小结

    JavaScript Math对象包含一些真正有用且强大的数学运算,但它缺乏大多数其他语言提供的许多重要运算,例如求和,乘积,奇数和偶数等等,本文就来介绍一下
    2023-08-08
  • uni-app自定义组件和通信的方式

    uni-app自定义组件和通信的方式

    组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,组件可以使用全局注册和页面引入两种方式进行使用,对uni-app自定义组件和通信相关知识感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

    JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】

    这篇文章主要介绍了JavaScript语法高亮库highlight.js用法,详细分析了highlight.js的下载、调用及具体使用技巧,需要的朋友可以参考下
    2016-11-11
  • 解决layer.open后laydate失效的问题

    解决layer.open后laydate失效的问题

    今天小编就为大家分享一篇解决layer.open后laydate失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论