当前位置：首页 > news >正文

深入探索JavaScript循环语句：从基础到高级应用

news 来源：原创 2025/7/6 12:55:16

深入探索JavaScript循环语句：从基础到高级应用

在前端开发中，JavaScript 的循环语句是构建动态和交互式网页的关键工具。本文将全面介绍 JavaScript 中的几种主要循环语句，包括 for、while、do...while 以及 for...in 和 for...of，并通过实例展示它们的实际应用。我们将使用 var 关键字来声明变量，以符合您的需求。

1. `for` 循环

for 循环是最常用的循环结构之一，适用于需要明确迭代次数的场景。其基本语法如下：

for (var i = 0; i < 10; i++) {console.log(i);
}

示例：计算数组元素的总和

var numbers = [1, 2, 3, 4, 5];
var sum = 0;for (var i = 0; i < numbers.length; i++) {sum += numbers[i];
}console.log("Sum:", sum); // 输出：Sum: 15

2. `while` 循环

while 循环在条件为真时重复执行代码块。其基本语法如下：

var i = 0;
while (i < 10) {console.log(i);i++;
}

示例：生成随机数直到满足特定条件

var randomNumber;
var target = 5;while (randomNumber !== target) {randomNumber = Math.floor(Math.random() * 10);console.log("Generated number:", randomNumber);
}console.log("Target reached:", randomNumber); // 输出：Target reached: 5

3. `do...while` 循环

do...while 循环至少会执行一次代码块，然后根据条件决定是否继续执行。其基本语法如下：

var i = 0;
do {console.log(i);i++;
} while (i < 10);

示例：用户输入验证

var userInput;
do {userInput = prompt("Enter a number between 1 and 10");
} while (userInput < 1 || userInput > 10);console.log("Valid input:", userInput); // 输出：Valid input: [用户输入的有效数字]

4. `for...in` 循环

for...in 循环用于遍历对象的可枚举属性。其基本语法如下：

var person = { name: "Alice", age: 25, city: "Wonderland" };for (var key in person) {console.log(key + ": " + person[key]);
}

示例：遍历对象并修改属性值

var car = { make: "Toyota", model: "Camry", year: 2020 };for (var prop in car) {if (typeof car[prop] === 'number') {car[prop] += 1; // 增加年份}
}console.log(car); // 输出：{ make: "Toyota", model: "Camry", year: 2021 }

5. `for...of` 循环

for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set等）。其基本语法如下：

var fruits = ["apple", "banana", "cherry"];for (var fruit of fruits) {console.log(fruit);
}

示例：遍历数组并计算元素长度之和

var words = ["hello", "world", "javascript"];
var totalLength = 0;for (var word of words) {totalLength += word.length;
}console.log("Total length:", totalLength); // 输出：Total length: 21

break 和 continue 语句及其注意事项

break 语句

break 语句用于立即退出最内层的循环或 switch 语句。当 break 被执行时，程序会跳出当前循环，继续执行循环之后的代码。这在需要在特定条件下提前退出循环时非常有用。

示例：寻找第一个质数

let num = 10;
let isPrime;for (let i = 2; i < num; i++) {isPrime = true;for (let j = 2; j < i; j++) {if (i % j === 0) {isPrime = false;break; // 退出内层循环}}if (isPrime) {console.log(i);break; // 退出外层循环}
}

在这个例子中，我们使用两个嵌套的 for 循环来检查每个数字是否为质数。当找到一个质数时，内部的 break 语句用于退出内层循环，而外层的 break 语句则用于退出外层循环。

continue 语句

continue 语句用于跳过当前循环的剩余代码，直接进入下一次迭代。它通常与条件语句结合使用，当满足某个条件时跳过当前循环的剩余部分。

示例：计算非偶数的和

let sum = 0;
for (let i = 1; i <= 10; i++) {if (i % 2 === 0) {continue; // 跳过偶数}sum += i;
}
console.log(sum); // 输出：25（所有奇数的和）

在这个例子中，我们使用 continue 语句来跳过偶数。只有当 i 是奇数时，才会将其加到 sum 变量中。

注意事项

避免过度使用：虽然 break 和 continue 语句在某些情况下非常有用，但过度使用可能会使代码难以理解和维护。尽量通过优化算法或逻辑来减少对它们的依赖。
标签的使用：可以使用标签来控制多层循环中的 break 和 continue。标签是一个标识符，放在循环之前，并加上冒号。例如：

outerLoop: for (let i = 0; i < 5; i++) {for (let j = 0; j < 5; j++) {if (j === 2) {continue outerLoop; // 跳过外层循环的剩余部分}}
}

深入探索JavaScript循环语句：从基础到高级应用

深入探索JavaScript循环语句：从基础到高级应用在前端开发中，JavaScript 的循环语句是构建动态和交互式网页的关键工具。本文将全面介绍 JavaScript 中的几种主要循环语句，包括 for、while、do...while 以及 for...in 和 for...of&#xff0…...

编程日记 2025/7/6 12:55:16

从0开始深度学习（35）——YOLO V5原理详解

以YOLO V5s为例，介绍YOLO V5的网络结构，以及其中具体的功能模块 1 YOLO V5的整体网络结构 YOLO V5网络结构分为四个部分： 输入端： 输入端负责对输入图像进行预处理，包括数据增强、锚框计算等。骨干网络（Ba…...

编程日记 2025/7/2 21:19:53

高级数据库模式设计与性能优化

数据库模式设计不仅仅是创建表和字段那么简单，还需要考虑数据的一致性、性能优化、安全性和可扩展性等多个方面。本文将深入探讨数据库模式设计的高级技巧，并提供一个实际的例子来展示如何在项目中应用这些技巧。 1. 数据库模式设计的高级技巧 1.1 多对…...

编程日记 2025/7/2 7:08:20

【开源免费】基于SpringBoot+Vue.JS图书进销存管理系统（JAVA毕业设计）

博主说明：本文项目编号 T 082 ，文末自助获取源码 \color{red}{T082，文末自助获取源码} T082，文末自助获取源码目录一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

编程日记 2025/7/6 16:10:11

监控易助力扩容1000个点位

铁路交通作为城市发展的重要动脉，其IT系统的稳定运行对于保障铁路运输的安全与高效至关重要。近期，四川某铁路用户为了进一步提升IT基础资源的监控和管理水平，决定对现有的运维体系进行扩容升级，引入了监控易一体化运维软件&#…...

编程日记 2025/7/5 12:39:28

克服大规模语言模型限制，构建新的应用方法——LangChain

大模型大模型的出现和落地开启了人工智能(AI)新一轮的信息技术革命，改变了人们的生活方式、工作方式和思维方式。大模型的落地需要数据、算力和算法三大要素。经过几年发展，大模型的数据集(包括多模态数据集)制作已经形成了规约，Meta、Go…...

编程日记 2025/7/3 7:18:44

1.安装开发工具 cmake brew install cmakeopenocd brew install openocdarm-none-eabi-gcc 用 brew 安装的版本会出现如下错误： arm-none-eabi-gcc: fatal error: cannot read spec file nosys.specs: No such file or directory用 arm 官方的版本没有问题。 cd …...

编程日记 2025/7/4 6:52:30

Leetcode 每日一题 1.两数之和

目录问题描述示例示例 1 示例 2 示例 3 提示解决方案算法思路过题图片代码实现复杂度分析注意事项题目链接结论问题描述给定一个整数数组 nums 和一个目标值 target，请你找出数组中和为目标值的那两个整数，并返回它们的数组下…...

编程日记 2025/7/2 1:23:54

柯桥职场商务英语生活英语口语培训外贸纺织口语学习

"等一下"该怎么说？ 大家应该都知道，wait a moment是一个祈使句，祈使句就难免带有命令的口吻，还有点不耐烦。如果你把“等一下”说成wait a moment，外国人多半认为你是个傲慢无礼的人。毕竟在他们看来wait a…...

编程日记 2025/7/4 22:33:20

ElasticSearch如何做性能优化？

大家好，我是锋哥。今天分享关于【ElasticSearch如何做性能优化？】面试题。希望对大家有帮助； ElasticSearch如何做性能优化？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 Elasticsearch 中，性能优化是…...

编程日记 2025/7/1 17:13:18

深度学习常用损失函数介绍

均方差损失（Mean Square Error，MSE） 均方误差损失又称为二次损失、L2损失，常用于回归预测任务中。均方误差函数通过计算预测值和实际值之间距离（即误差）的平方来衡量模型优劣。即预测值和真实值越接近&…...

编程日记 2025/7/3 12:08:38

PSHuman 部署笔记

目录 github地址： 依赖项： xformers安装： 解决方法，安装xformers smpl_data下载： 推理步骤： SMPLDataset 香港科技大学提出了一种叫PSHuman的新框架。这个方法利用了一个多视角扩散模型的“先验知识…...

编程日记 2025/7/4 19:12:41

怎么样能使Ubuntu的文件浏览器显示当前目录的路径，而不是只显示一个文件名？

默认情况下Ubuntu的文件浏览器是只显示当前目录的目录名的，这很不便我们查看路径或直接利用路径进行定位，那么怎么样能使Ubuntu的文件浏览器显示当前目录的路径呢？ 两种方法： 第1种-临时方法按下快捷键 Ctrl L，导航…...

编程日记 2025/7/4 15:29:26

自回归模型（AR ）

最近看到一些模型使用了自回归方法，这里就学习一下整理一下相关内容方便以后查阅。自回归模型（AR ） 自回归模型（AR ）AR 模型的引入AR 模型的定义参数的估计方法模型阶数选择平稳性与因果性条件自相关与偏自相关函数优…...

编程日记 2025/7/5 19:46:06

工具推荐-js爬取工具

现在测试方向都偏向于从js中的接口来入手找到可以进的点，关于快速扫描js文件来发现敏感接口的工具有很多，下面的jjjjs就是其一项目地址: GitHub - ttstormxx/jjjjjjjjjjjjjs: 爬网站JS文件，自动fuzz api接口，指定api接口&#x…...

编程日记 2025/7/4 23:10:56

CSS学习记录05

CSS外边距 CSS margin属性用于在任何定义的边框之外，为元素周围创建空间。通过CSS，您可以完全控制外边距，一些属性可用于设置元素每侧（上、右、下和左）的外边距。 Margin - 单独的边 CSS拥有用于为元素的每一侧指定…...

编程日记 2025/7/4 16:09:56

差异基因富集分析（R语言——GOKEGGGSEA）

接着上次的内容，上篇内容给大家分享了基因表达量怎么做分组差异分析，从而获得差异基因集，想了解的可以去看一下，这篇主要给大家分享一下得到显著差异基因集后怎么做一下通路富集。 1.准备差异基因集我就直接把上次分享的拿到这…...

编程日记 2025/6/30 16:25:18

ISO 45001 职业健康安全管理体系的实施具有多方面的重要意义

对企业的意义提升企业形象：实施 ISO 45001 体系体现了企业对员工职业健康安全的重视和承诺，有助于树立良好的企业形象，增强企业在社会公众、客户、投资者等方面的认可度和美誉度，提升企业的市场竞争力。增强员工满意度和忠诚度&a…...

编程日记 2025/7/4 15:38:53

HarmonyOS-中级(三)

文章目录合理使用动画和转场Web组件和WebView给应用添加通知和提醒 🏡作者主页：点击！ 🤖HarmonyOS专栏：点击！ ⏰️创作时间：2024年12月08日12点12分合理使用动画和转场动效场景设计&#x…...

编程日记 2025/7/5 6:30:20

报错:Invalid HTTP method: PATCH executing PATCH http://XXX.XXX

分析： 问题在于我使用feignclietn调用PatchMapping方法时，发送的 PATCH 请求方法出现了不匹配的情况。虽然说springboot自带了RESTful风格的方法（GET、POST、PUT、DELETE、PATCH，但是PATCH相较于前几个来说算是新的HTTP方法&#…...

编程日记 2025/7/2 0:08:33

Open WebUI项目源码学习记录（从0开始基于纯CPU环境部署一个网页Chat服务）

感谢您点开这篇文章:D，鼠鼠我是一个代码小白，下文是学习开源项目Open WebUI过程中的一点笔记记录，希望能帮助到你～ 本人菜鸟，持续成长，能力不足有疏漏的地方欢迎一起探讨指正，比心心&#xff5e…...

编程日记 2025/7/1 19:14:57

WPF Prism 01-BootstrapperShell

Prism介绍 Prism 是一个用于在 WPF、.NET MAUI、Uno 平台和 Xamarin Forms 中构建松耦合、可维护和可测试的 XAML 应用程序的框架。每个平台都有单独的发布版本，并且这些版本将在独立的开发时间线上进行开发。Prism 提供了一组设计模式的实现，这些模式有…...

编程日记 2025/7/2 13:07:11

在Ubuntu22.04 jammy下用qemu模型riscv32环境装鸿蒙（未完成，待续）

在使用实体ESP32C3 安装鸿蒙失败后，就是这个：完全按照手册win10里装Ubuntu 虚拟机然后编译ESP32（主要是想针对ESP32C3和S3）开发板的鸿蒙系统(失败)-CSDN博客转向用qemu模拟环境装鸿蒙学习手册riscv32_virt/README_zh.md OpenHar…...

编程日记 2025/6/30 20:53:16

第2章：CSS基本语法 --[CSS零基础入门]

CSS（层叠样式表，Cascading Style Sheets）是用来描述HTML或XML（包括各种XML：SVG, MathML 或 XHTML）等文档的外观和格式的语言。以下是CSS的基本语法： 1.选择器 1.元素选择器元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时，你是在告诉浏览器对页面…...

编程日记 2025/6/30 1:42:09

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json，解除中国不能使用copilot的限制。使用Notepad搜索copilot全文搜索，将下面两处的“CN,”删除，删除后如下： {"$comment": "Show Copilot on t…...

编程日记 2025/7/6 5:10:12

Python爬虫实战：抓取拼多多商品详情数据（基于pdd.item_get接口）

在当前的电商市场中，拼多多以其独特的拼团模式和优惠价格吸引了大量用户，成为继淘宝、京东之后的又一大电商平台。对于数据分析和市场研究者来说，获取拼多多的商品详情数据显得尤为重要。本文将介绍如何使用Python爬虫技术，通过调…...

编程日记 2025/6/29 18:34:31

如何在x86模拟器和鸿蒙API9如何使用MQTT模块ohos_mqtt

目录引言安装失败的原因如何编译so文件的x86_64版本下载源代码安装NDK 代码编译安装MQTT软件包避免MQTT软件包自动升级设置libs 客户端程序的编写运行测试结语参考文献引言在上周的博客（如何在鸿蒙API9和x86模拟器中使用MQTT-CSDN博客&am…...

编程日记 2025/7/3 7:31:50

VB.NET 从入门到精通：开启编程进阶之路

摘要： 本文全面深入地阐述了 VB.NET 的学习路径，从基础的环境搭建与语法入门开始，逐步深入到面向对象编程、图形用户界面设计、数据访问、异常处理、多线程编程以及与其他技术的集成等核心领域，通过详细的代码示例与理论讲解&…...

编程日记 2025/7/1 10:10:52

芝法酱学习笔记（1.3）——SpringBoot+mybatis plus+atomikos实现多数据源事务

一、前言 1.1 业务需求之前我们在讲解注册和登录的时候，有一个重要的技术点忽略了过去。那就是多数据源的事务问题。按照我们的业务需求，monitor服务可能涉及同时对监控中心数据库和企业中心数据库进行操作，而我们希望这样的操作在一个事…...

编程日记 2025/7/1 23:29:36

图像处理插件：让小程序焕发视觉新生的秘密武器

在小程序开发中，图像处理是一个重要的环节，它涉及到图片的加载、显示、裁剪、压缩等多个方面。为了简化这一复杂过程，开发者通常会使用图像处理插件。这些插件不仅提供了丰富的图像处理功能，还封装了底层的图像操作逻辑&#xff0…...

编程日记 2025/7/1 16:45:25

力扣刷题TOP101: 27.BM34 判断是不是二叉搜索树

目录： 目的思路复杂度记忆秘诀 python代码目的： 给定一个二叉树根节点，请判断这棵树是不是二叉搜索树。二叉搜索树满足每个节点的左子树上的所有节点均小于当前节点且右子树上的所有节点均大于当前节点。思路什么是二叉搜索树&am…...

编程日记 2025/7/3 22:15:15

Linux图形化工具推荐

1、MobaXterm MobaXterm Xserver with SSH, telnet, RDP, VNC and X11 - DownloadFree X server for Windows with tabbed SSH terminal, telnet, RDP, VNC and X11-forwarding - Downloadhttps://mobaxterm.mobatek.net/download.html 2、FinalShell FinalShell SSH工具,服…...

编程日记 2025/7/3 5:17:53

深入探索JavaScript循环语句：从基础到高级应用

1. for 循环

示例：计算数组元素的总和

2. while 循环

示例：生成随机数直到满足特定条件

3. do...while 循环

示例：用户输入验证

4. for...in 循环

示例：遍历对象并修改属性值

5. for...of 循环

示例：遍历数组并计算元素长度之和

break 和 continue 语句及其注意事项

break 语句

示例：寻找第一个质数

continue 语句

示例：计算非偶数的和

注意事项

相关文章：

1. `for` 循环

2. `while` 循环

3. `do...while` 循环

4. `for...in` 循环

5. `for...of` 循环