首页 程序笔记 如何打破 JavaScript 循环以及为什么您可能需要这样做

如何打破 JavaScript 循环以及为什么您可能需要这样做

循环并不总是必须完成才能实现其目标。在这种情况下,尽早打破循环可以加快代码速度。

要点

  • JavaScript 循环对于重复代码至关重要,理解它们的语法和细微差别至关重要。
  • Break 语句可让您提前终止循环,从而提高代码执行效率。
  • 跳出循环可以优化代码,防止不必要的迭代,并有助于有效地处理错误。

JavaScript 的循环允许您重复代码,但有时您需要退出循环来处理特殊情况。这就是break语句的用武之地。了解break语句如何工作以及为什么您可能需要它。

了解 JavaScript 循环

JavaScript 循环允许您重复代码,保持程序整洁并减少重复。循环是一个重要的概念,几乎您编写的每个程序都会使用它。所以,如果你刚刚开始学习 JavaScript,你应该确保你彻底理解循环。

您应该熟悉的不同类型的 JavaScript 循环包括:

  • for循环
  • while 循环
  • do...while 循环
  • for…in 循环
  • for…of 循环

它们都执行迭代,但有细微的差别,使每个都适合不同的情况。以下是每种循环类型的语法:

循环类型:

 

for

语法:

for (init; cond; next) {
    // Code block
}

描述:

只要指定条件 (cond) 为真,就会运行代码块。初始化表达式 (init) 在循环开始时运行一次,而 next 表达式在每次循环到达代码块末尾时运行。

循环类型:

 

while

语法:

while (condition) {
    // Code block
}

描述:

只要指定条件为真,就运行代码块。

循环类型:

 

do…while

语法:

do {
    // Code block
} while (condition);

描述:

只要指定条件为真,就运行代码块。运行代码块后检查条件,因此始终至少运行一次。

循环类型:

 

for…in

语法:

for (property in object) {
    // Code block
}

描述:

为对象的每个属性运行代码块。

循环类型:

 

for…of

语法:

for (element of iterable) {
    // Code block
}

描述:

为可迭代对象(例如数组、字符串或映射)中的每个元素运行代码块。

“break”声明简介

Break 语句提前终止循环。随着循环的进行,一旦接触到break语句,它就会立即停止。这会导致程序在循环后继续执行下一条语句。

break 对于在不可预测的点停止循环非常有用,而不是等待运行多次迭代或主要条件变为 false。它有一个非常简单的语法:

break;

如何在不同的 JavaScript 循环中使用“break”

这些示例演示了如何打破每个可用的 JavaScript 循环。请特别注意局部变量的值以及它们的打印或计算时间。

跳出 for 循环

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++)
{
    sum += numbers[i];
    if (sum > 5)
    {
        break;
    }
}
console.log(sum); // Output: 6

此代码使用 for 循环对元素数组求和。该循环迭代数组的每个元素,并对它们求和。该条件检查总和是否超过 5。如果超过,break 语句将终止循环。

跳出 While 循环

const numbers = [1, 2, 3, 4, 5];
let product = 1;
let i = 0;
while (i < numbers.length)
{
    product *= numbers[i];
    if (product > 10)
    {
        break;
    }
    i++;
}
console.log(product); // Output: 24

此代码使用 while 循环来查找数组中元素的乘积。该循环迭代数组的每个元素,计算乘积。条件内的break语句将在乘积超过10时停止循环。

跳出 Do…While 循环

let i = 1;
do
{
    if (i % 2 === 0)
    {
       console.log(i);
    }
    i++;
    if (i > 5)
    {
       break; 
    }
} while (i <= 10);
// Output:
// 2
// 4

do...while 循环迭代从 1 到 10 的数字,打印偶数。 if 条件中的break 语句检查循环计数器是否超过5。如果条件为真,则继续退出循环。

跳出 for...in 循环

const sentence = "Hello";
let result = "";
for (let index in sentence)
{
    if (index == 2)
    {
        break;
    }
    result += sentence[index];
}
console.log(result);
// Output: He

该循环迭代字符串中的每个字符,并将它们连接起来。这里,条件检查循环索引是否等于2。如果是,则使用break退出循环。

跳出 for...of 循环

const numbers = [1, 2, 3, 4, 5];
for (let num of numbers.reverse())
{
    console.log(num);
    if (num === 3)
    {
        break;
    }
}
// Output:
// 5
// 4
// 3

该循环以相反的顺序迭代数组的每个元素,并将它们连接起来。如果循环遇到值3,它将通过break语句退出。

打破循环的重要性

跳出循环可能是优化代码的有效方法。尽早退出循环可以防止不必要的迭代,降低时间复杂度,并允许您有效地处理错误。

重点练习如何打破程序中的不同 JavaScript 循环,以加强您的理解。


3

站心网

循环并不总是必须完成才能实现其目标。在这种情况下,尽早打破循环可以加快代码速度。要点JavaScript 循环..

为您推荐

Web前端入门第 57 问:JavaScript 数据类型与类型转换

在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变..

JavaScript实现图片上传预览及获取图片尺寸和大小的完整指南

在现代Web开发中,提供图片上传的预览功能以及获取图片的尺寸和大小信息,已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能,帮助你在用户上传图片前进行有效的验证和优化。一、实现图..

Web前端入门第 60 问:JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。数组的定义JS 的数组花样很多..

Web前端入门第 55 问:JavaScript 严格模式与非严格模式区别

JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。启用严格模式1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声..

Web前端入门第 53 问:JavaScript 的各种调试方法

任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类!程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢?如何排..

Web前端入门第 52 问:JavaScript 的应用领域

截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。那么咱们接下来看看 Java..

.NET C# 过滤从富文本编辑器html里的Javascript脚本

富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..

img标签的onerror事件 以及 无限循环报错问题

有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢?可以借用img标签的onerror事件,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会..

轻松学习 JavaScript函数中的默认参数

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..

JavaScript API 设计原则详解

前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..

JavaScript 中精度问题以及解决方案

JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在ES5 规范中指出了指数位E的取值范围是[-1074, 971]。精度问题汇总想用有限..

JavaScript 六种继承方式

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。原型链首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细..

JavaScript 事件委托详解

基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、focus……)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应..

JavaScript 中的遍历详解

编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象obj。测试对象// 为 Object 设置三个自定义属性(可枚举)Object.p..

值得探索的 8 个机器学习 JavaScript 框架

JavaScript开发人员倾向于寻找可用于机器学习模型训练的JavaScript框架。下面是一些机器学习算法,基于这些算法可以使用本文中列出的不同JavaScript框架来模型训练:简单的线性回归多变量线性回归逻辑回归朴素贝叶斯..

JavaScript 保留两位小数

以下我们将为大家介绍 JavaScript 保留两位小数的实现方法:四舍五入以下处理结果会四舍五入:var num =2.446242342;num = num.toFixed(2); // 输出结果为 2.45不四舍五入以下处理结果不会四舍五入:第一种,先把小数边..

JavaScript 页面跳转、页面重定向

JavaScript 实现页面跳转重定向可以使用以下两种方法:window.location.replace("url")类似 HTTP 重定向将地址替换成新 url,该方法通过指定 URL 替换当前缓存在历史里(客户端)的项目,因此当使用 replace 方法之..

在 Javascript 中 声明时用 var 与不用 var 的区别

avascript 声明变量的时候,虽然用 var 关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。var num = 1;是在当前域中声明变量。如果在方..

javascript中call()、apply()、bind()的用法终于理解

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解!先看明白下面:例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2shows() // 盲僧 比较一下这两者 this 的差别,第一个打印里面的 this ..

5 个顶级的 JavaScript Ajax 组件和库

在这篇文章中,我们将介绍一些用于AJAX调用的最好的JS库,包括jQuery,Axios和Fetch。欢迎查看代码示例!AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XM..

发表回复

返回顶部

微信分享

微信分享二维码

扫描二维码分享到微信或朋友圈

链接已复制