Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JS循环学习:while循环语句的使用(示例详解)_创想鸟

JS循环学习:while循环语句的使用(示例详解)

JS循环学习:while循环语句的使用(示例详解)

循环就是重复做一件事,在编写代码的过程中,我们经常会遇到一些需要反复执行的操作,例如遍历一些数据、重复输出某个字符串等,如果一行行的写那就太麻烦了,对于这种重复的操作,我们应该选择使用循环来完成。

循环的目的就是为了反复执某段代码,使用循环可以减轻编程压力,避免代码冗余,提高开发效率,方便后期维护。while 循环是 JavaScript 中提供的最简单的循环语句,下面我们来了解一下 while循环和do-while循环的使用。

一:while循环

while循环语句是一种当型循环语句,先对循环条件进行判断,当条件满足,则执行循环体,不满足时则停止。

作用:反复执行某一项操作,直到指定的条件不成立。

特点:先判断表达式,当表达式结果为真时执行相应的语句。

1、JS while 循环语法

while(表达式){    //表达式为循环条件     // 要执行的代码}

语句解析:

先计算“表达式”的值,当值为真时, 执行循环体内的“PHP语句块”;

说明:“表达式”的计算结果是布尔类型( TRUE 或 FALSE)的,如果是其他类型的值也会自动转换为布尔类型的值(因为PHP是弱语言类型,会根据变量的值,自动把变量转换为正确的数据类型)。“语句块”就是由{ }包围的一个或多个语句的集合;如果语句块中只有一个语句,也可以省略{ }。

执行结束后,返回到表达式,再次计算表达式的值进行判断,当表达式值为真,则继续执行“语句块”……这个过程会一直重复

直到表达式的值为假时才跳出循环,执行while 下面的语句。

while语句的流程图如下所示:

1.png

通常“表达式”是使用比较运算符或者逻辑运算符计算后的值

示例代码如下:

var i = 1;while( i <= 5) {    document.write(i+", ");    i++;}

0.png

注意事项

在编写循环语句时,一定要确保条件表达式的结果能够为假(即布尔值 false),因为只要表达式的结果为 true,循环会一直持续下去,不会自动停止,对于这种无法自动停止的循环,我们通常将其称为“无限循环”或“死循环”。

如果不小心造成无限循环,可能会导致浏览器或者计算机卡死。

如果表达式一直为真,循环条件一直成立,则while 循环会一直执行下去,永不结束,成为“死循环”

var i = 1;while(i){    console.log(i);}

运行程序后,会一直输出变量i的值,直到用户强制关闭。

JS while 循环示例

【示例1】使用 while 循环计算 1~100 之间所有整数的和:

var i = 1;var sum=0;while(i<=100){sum+=i;i++;}console.log("1加到100的值为:"+sum);

输出结果:

1.png

【示例2】找出 1900 年到 2020 年之间所有的闰年,并以每行 6 个进行输出:

var i = 1900;var count = 0; //计数闰年的个数while (i <= 2020) {    //判断是否是闰年    if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {        document.write(i + "  ");        count++;        if (count % 6 == 0) {            document.write("
"); } } i++;}

2.png

2、JS while 循环嵌套结构

while循环 也可以实现嵌套的效果,即 while 循环里面嵌套一个或多个 while 循环。

语法格式:

while(条件1){     // 条件1成立执行的代码     while(条件2){          // 条件2成立执行的代码           ......     }}

总结:嵌套就是包含的意思,所谓while循环嵌套,就是一个while里面嵌套一个while的写法,每个while和之前的基础语法是相同的。

这里,我们定义了两个 while 循环的嵌套,当然,我们可以嵌套任意多个的 while 循环。

理解while循环执行流程

当内部循环执行完成之后,再执行下一次外部循环的条件判断。

7.png

示例1:使用循环嵌套,打印计数器

var i = 0;while(i < 2){   console.log("i =", i);   var j = 0;   while(j < 2){console.log("tj =", j);j += 1;   }   i++;}console.log("Over");

9.png

首先,我们定义了一个最外层的 while 循环嵌套,计数器 变量 i 从 0 开始,结束条件是 i < 2,每次执行一次循环将 i 的值加 1,并打印当前 i 的值。

Medeo Medeo

AI视频生成工具

Medeo 191 查看详情 Medeo

在最外层循环的里面,同时又定义了一个内部循环,计数器变量 j 从 0 开始,结束条件是 i < 2,每次执行一次循环将 j 的值加 1,并打印当前 j 的值。

while循环嵌套总结

JavaScript 的 while 循环也可以实现嵌套的效果,即 while 循环里面嵌套一个或多个 while 循环。

示例2:

/*1. 循环打印3次媳妇,我错了2. 刷碗3. 上面是一套惩罚,这一套惩罚重复执行3天----一套惩罚要重复执行---放到一个while循环里面*/var j = 0while(j < 3){    var i = 0    while(i < 3){        document.write('媳妇,我错了
') i += 1;} document.write('刷碗
')document.write('一套惩罚就结束了!!!!!!!!!!!!
') j += 1;}

6.png

二:do-while循环

除了while循环,还有一种 do-while 循环。

do-while循环语句是一种“直到型”循环语句,它是先在执行了一次循环体中的“语句块”之后,然后再对循环条件进行判断,如果为真则继续循环,如果为假,则终止循环。

因此:不论表达式的结果,do-while循环语句至少会执行一次“语句块”。

do-while循环语句的特点:先执行循环体,然后判断循环条件是否成立。

1、JS do-while 循环语法

do{    语句块;  }while(表达式);//表达式为循环条件

语句解析:

先执行一次循环体中的“语句块”,然后判断“表达式”的值,当“表达式”的值为真时,返回重新执行循环体中的语句块……这个过程会一直重复

直到表达式的值为假时,跳出循环,此时循环结束,执行后面的语句。

说明:

和while循环一样,do-while循环中“表达式”的计算结果一定是布尔型的 TRUE 或 FALSE,如果是其他类型的值也会自动转换为布尔类型的值。

do-while语句最后的分号;是无法省略的(一定要有),它是do while循环语法的一部分。

do-while循环语句的流程图如下所示:

1.png

JS do-while 循环示例

【示例1】使用 do-while 输出1~5数字:

var i = 1;do {    document.write(i+", ");    i++;}while( i <= 5);

3.png

【示例2】使用 while 循环计算 1~100 之间所有整数的和:

var i = 1;var sum=0;do{sum+=i;i++;}while(i<=100);console.log("1 + 2 + 3 + ... + 98 + 99 + 100 = "+sum);

4.png

【示例3】找出 1900 年到 2020 年之间所有的闰年

var i = 1900;var count = 0; //计数闰年的个数do {    //判断是否是闰年    if (i % 4 == 0 && i % 100 != 0 || i % 400 == 0) {console.log(i);    }    i++;}while (i <= 2020);

5.png

2、JS do-while 循环嵌套结构

do while循环 也可以实现嵌套的效果,即 do while 循环里面嵌套一个或多个 do while 循环。这种写法就类似于 while 循环 的嵌套。

语法:

do{    // 语句块1;    do{    // 语句块2;    do{    // 语句块2;    ......}while(条件3);    }while(条件2);}while(条件1);

这里,我们定义了三个 do while 循环的嵌套,当然,我们可以嵌套任意多个的 do while 循环。

案例:使用循环嵌套,打印计数器

var i = 0;do{console.log("i =", i);var j = 0;do{console.log("tj =", j);j += 1;}while(j < 2);i++;}while(i < 2);console.log("Over");

8.png

首先,我们定义了一个最外层的 do while 循环嵌套,计数器 变量 i 从 0 开始,结束条件是 i < 2,每次执行一次循环将 i 的值加 1,并打印当前 i 的值。

在最外层循环的里面,同时又定义了一个内部循环,计数器变量 j 从 0 开始,结束条件是 i < 2,每次执行一次循环将 j 的值加 1,并打印当前 j 的值。

do while循环嵌套总结

JavaScript 的 do while 循环也可以实现嵌套的效果,即 do while 循环里面嵌套一个或多个 do while 循环。

【推荐学习:javascript高级教程】

以上就是JS循环学习:while循环语句的使用(示例详解)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/836165.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
彻底解读电脑版鲁大师:性能测试与优化工具的全方位应用
上一篇 2025年11月27日 10:30:03
Laravel模型属性转换?属性类型如何转换?
下一篇 2025年11月27日 10:30:04

相关推荐

  • 谷歌浏览器网页显示样式错乱怎么办

    谷歌浏览器网页显示样式错乱怎么办谷歌浏览器网页显示样式错乱怎么办谷歌浏览器网页显示样式错乱怎么办谷歌浏览器网页显示样式错乱怎么办

    当您使用谷歌浏览器浏览网页时,如果遇到页面布局混乱、图片无法加载、文字重叠等样式错乱的问题,这通常是由浏览器缓存、扩展程序冲突或设置不当引起的。本文将为您提供一套完整的排查和解决方案,通过分步指导,帮助您恢复网页的正常显示,确保流畅的浏览体验。 清理浏览器缓存与数据 浏览器长时间积累的缓存文件可能会…

    2026年10月5日 • 用户投稿
    100
  • 手把手教你如何用海螺Ai克隆自己的声音,支持情绪化的声音克隆

    手把手教你如何用海螺Ai克隆自己的声音,支持情绪化的声音克隆手把手教你如何用海螺Ai克隆自己的声音,支持情绪化的声音克隆手把手教你如何用海螺Ai克隆自己的声音,支持情绪化的声音克隆手把手教你如何用海螺Ai克隆自己的声音,支持情绪化的声音克隆

    语音克隆技术早已不再是新鲜事物,之前大火的Chat TTS想必大家都听说过,不过它还是需要自己动手部署,流程相对复杂。今天苏米测试了一款新推出的海螺AI海外版语音克隆功能,仅需60秒就能复制你的声音,只需10到60秒的音频样本即可完美复刻声音。 苏米亲自体验了一下,发现它操作极其简便,生成效果令人震…

    2026年10月5日 • 用户投稿
    000
  • Java REST 服务中实现 Gmail API 无人值守访问的策略与实践

    Java REST 服务中实现 Gmail API 无人值守访问的策略与实践Java REST 服务中实现 Gmail API 无人值守访问的策略与实践Java REST 服务中实现 Gmail API 无人值守访问的策略与实践Java REST 服务中实现 Gmail API 无人值守访问的策略与实践

    本文深入探讨了Java REST服务在无需用户持续干预下访问Gmail API的多种策略。核心内容包括针对Google Workspace域账户的域范围委派(Domain-Wide Delegation)方案,以及针对标准Gmail账户的OAuth 2.0刷新令牌机制。文章详细阐述了每种方法的实现原…

    2026年10月5日 • 用户投稿
    000
  • 《忍者龙剑传4》性能细节曝光!XSX支持120帧模式

    《忍者龙剑传4》性能细节曝光!XSX支持120帧模式《忍者龙剑传4》性能细节曝光!XSX支持120帧模式《忍者龙剑传4》性能细节曝光!XSX支持120帧模式《忍者龙剑传4》性能细节曝光!XSX支持120帧模式

    据windows central报道,备受期待的动作游戏《忍者龙剑传4》(ninja gaiden 4)的性能细节近日得以披露,该作将于xbox series x上提供120fps的高帧率模式。 报道称,在Xbox Series X主机上,玩家将能够选择以牺牲部分画质为代价,将帧率从标准的60FPS…

    2026年10月5日 • 用户投稿
    000
  • composer require –update-with-dependencies是什么意思

    composer require –update-with-dependencies是什么意思composer require –update-with-dependencies是什么意思composer require –update-with-dependencies是什么意思composer require –update-with-dependencies是什么意思

    安装新包时自动更新其依赖以解决版本冲突,适用于依赖版本过旧或存在冲突场景,确保依赖兼容性。 composer require –update-with-dependencies 是 Composer(PHP 的依赖管理工具)中的一个命令,用于安装新的包,并在必要时更新已安装的依赖项以解决…

    2026年10月5日 • 用户投稿
    000
  • 如何高效捕获PHP应用中的异常与错误?使用Composer和Airbrake/PHPBrake轻松实现实时监控

    如何高效捕获PHP应用中的异常与错误?使用Composer和Airbrake/PHPBrake轻松实现实时监控如何高效捕获PHP应用中的异常与错误?使用Composer和Airbrake/PHPBrake轻松实现实时监控如何高效捕获PHP应用中的异常与错误?使用Composer和Airbrake/PHPBrake轻松实现实时监控如何高效捕获PHP应用中的异常与错误?使用Composer和Airbrake/PHPBrake轻松实现实时监控

    可以通过一下地址学习composer:学习地址 在现代PHP应用开发中,我们追求的不仅仅是功能的实现,更是应用的稳定性与健壮性。然而,在实际部署上线后,各种意想不到的异常和错误总是会悄然发生。你是否也曾遇到过这样的困境:用户抱怨某个页面突然空白,或者某个操作没有响应,而你却只能通过翻阅海量的服务器日…

    2026年10月5日 • 用户投稿
    500
  • 豆包AI如何制作分屏视频?多画面拼接技巧

    豆包ai制作分屏视频的基本步骤包括:1. 选择和导入视频源,2. 在拼接界面调整视频位置和大小,3. 预览效果,4. 导出视频;优化视觉效果的方法有:1. 使用“色彩校正”工具调整色调,2. 注意剪辑点避免跳跃感,3. 添加统一的滤镜风格;常见问题及解决方法包括:1. 通过“时间轴”功能解决视频同步…

    2026年10月5日
    000
  • 中国主流家电征战欧洲!海尔洗衣机量、额双第一

    中国主流家电征战欧洲!海尔洗衣机量、额双第一中国主流家电征战欧洲!海尔洗衣机量、额双第一中国主流家电征战欧洲!海尔洗衣机量、额双第一中国主流家电征战欧洲!海尔洗衣机量、额双第一

    欧洲家电市场长期被视为中国品牌出海的“高难度赛道”,不仅汇聚了众多历史悠久的本土品牌,还拥有对产品品质极为挑剔的消费群体。根据gfk consumer life 2024年的调研数据,超过半数西欧消费者倾向于选择“本国制造”的家电产品,叠加日益严苛的能效与环保法规,中国品牌要在这一市场站稳脚跟,挑战…

    2026年10月5日 • 用户投稿
    200
  • UC浏览器如何添加脚本_UC浏览器脚本添加方法

    首先启用UC浏览器开发者模式并开启调试权限,接着可通过书签注入JavaScript脚本实现功能增强;也可安装用户脚本管理器插件(如Violentmonkey)以支持自动运行;对于本地HTML文件,可直接编辑插入script标签嵌入脚本。 如果您希望在UC浏览器中增强网页功能或实现自动化操作,可能需要…

    2026年10月5日
    000
  • 如何在Java中实现URL自动编码 Java处理URL参数编码技巧

    如何在Java中实现URL自动编码 Java处理URL参数编码技巧如何在Java中实现URL自动编码 Java处理URL参数编码技巧如何在Java中实现URL自动编码 Java处理URL参数编码技巧如何在Java中实现URL自动编码 Java处理URL参数编码技巧

    在java中实现url自动编码的核心在于使用java.net.urlencoder和java.net.uri类。1. urlencoder.encode()用于对单个字符串进行url编码,尤其适用于查询参数值的编码,必须指定字符集(推荐utf-8);2. uri类用于构建结构化的url,能智能处理各…

    2026年10月5日 • 用户投稿
    100
  • 我用Claude 4拆解了Claude 4的系统提示词

    我用Claude 4拆解了Claude 4的系统提示词我用Claude 4拆解了Claude 4的系统提示词我用Claude 4拆解了Claude 4的系统提示词我用Claude 4拆解了Claude 4的系统提示词

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 近期Claude 4进行了升级,作为顶尖的AI编程模型,深入理解其工作原理对使用该模型非常有益。我看到了花叔分享的Claude 4系统提示词解析,确实很长,有些部分我没完全弄懂。于是我想,为什么…

    2026年10月5日 • 用户投稿
    100
  • 10个 AI PPT 生成工具,ai轻松打造精美 PPT,2024 必备!

    10个 AI PPT 生成工具,ai轻松打造精美 PPT,2024 必备!10个 AI PPT 生成工具,ai轻松打造精美 PPT,2024 必备!10个 AI PPT 生成工具,ai轻松打造精美 PPT,2024 必备!10个 AI PPT 生成工具,ai轻松打造精美 PPT,2024 必备!

    PPT 是职场人士必备的技能,也是精英们用来打造优质项目的必备工具,现在借助 AI 的力量,制作精美的 PPT 将变得更加轻松。对于职场人来说,提高效率就意味着提升自我价值。今天苏米为大家整理了10款国内可用的 Ai PPT 在线生成工具,帮助你早日实现提前下班的愿望! ☞☞☞AI 智能聊天, 问答…

    2026年10月5日 • 用户投稿
    100
  • composer self-update命令执行失败怎么办

    composer self-update命令执行失败怎么办composer self-update命令执行失败怎么办composer self-update命令执行失败怎么办composer self-update命令执行失败怎么办

    执行 composer self-update 失败通常因权限、网络、路径或缓存问题;2. 权限问题可使用 sudo 或将 Composer 安装至用户目录并配置 PATH;3. 通过包管理器安装的 Composer 不支持 self-update,应使用对应工具如 apt 或 brew 升级;4.…

    2026年10月5日 • 用户投稿
    000
  • PHP动态设置背景色:避免多余的标签导致的异常行为

    <img src="https://img.php.cn/upload/article/001/246/273/175962888554659.jpg" alt="PHP动态设置背景色:避免多余的标签导致的异常行为”>标签导致的异常行为&#822…

    用户投稿 2026年10月5日
    000
  • composer的 “Classmap generation completed” 过程太慢怎么办

    composer的 “Classmap generation completed” 过程太慢怎么办composer的 “Classmap generation completed” 过程太慢怎么办composer的 “Classmap generation completed” 过程太慢怎么办composer的 “Classmap generation completed” 过程太慢怎么办

    优化 Composer autoloader 生成速度需从配置入手:1. 检查 classmap 路径,仅保留必要目录如 src/;2. 推荐改用 PSR-4 自动加载,避免全量扫描;3. 使用 exclude-from-classmap 排除 Tests、examples 等无关目录;4. 清理未…

    2026年10月5日 • 用户投稿
    100
  • win8系统下IE浏览器无法打开网页_修复Win8自带IE浏览器故障

    win8系统下IE浏览器无法打开网页_修复Win8自带IE浏览器故障win8系统下IE浏览器无法打开网页_修复Win8自带IE浏览器故障win8系统下IE浏览器无法打开网页_修复Win8自带IE浏览器故障win8系统下IE浏览器无法打开网页_修复Win8自带IE浏览器故障

    首先重置IE浏览器设置并重启电脑;若无效,修复注册表Main键权限、刷新DNS缓存与重置网络协议、注册关键DLL文件,最后禁用增强保护模式以恢复IE正常访问网页功能。 如果您尝试访问某个网站,但Windows 8系统自带的IE浏览器无法加载页面,则可能是由于浏览器设置、网络配置或系统组件损坏导致。以…

    2026年10月5日 • 用户投稿
    000
  • 韩小圈平台入口链接_韩小圈网页版观看地址

    韩小圈平台入口链接_韩小圈网页版观看地址韩小圈平台入口链接_韩小圈网页版观看地址韩小圈平台入口链接_韩小圈网页版观看地址韩小圈平台入口链接_韩小圈网页版观看地址

    韩小圈平台入口链接是https://www.hanxiaoquan.com,该平台提供高清丰富的韩剧资源,支持智能追剧和社区互动功能,用户可便捷观看、缓存及参与讨论。 韩小圈平台入口链接在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来韩小圈网页版观看地址,感兴趣的网友一起随小编来瞧瞧吧! …

    2026年10月5日 • 用户投稿
    000
  • lunx怎么安装php7

    lunx怎么安装php7lunx怎么安装php7lunx怎么安装php7lunx怎么安装php7

    lunx安装php7的方法是:1、使用“Ctrl+alt+t”组合键打开终端;2、添加PHP7存储库;3、更新Repository,添加PPA存储库后,更新系统软件包列表以使该存储库可用;4、安装PHP7.0和其它所需组件;5、完成安装后,验证是否成功安装“PHP -v”,出现版本号即可。 本教程操…

    2026年10月5日 • 用户投稿
    000
  • AI创新实力彰显,中兴通讯星云大模型获推理榜总分第一!

    AI创新实力彰显,中兴通讯星云大模型获推理榜总分第一!AI创新实力彰显,中兴通讯星云大模型获推理榜总分第一!AI创新实力彰显,中兴通讯星云大模型获推理榜总分第一!AI创新实力彰显,中兴通讯星云大模型获推理榜总分第一!

    2025年,全球ai大型模型的竞争达到了前所未有的激烈程度。最新的中文大模型评估基准superclue发布的《中文大模型基准测评2025年5月报告》指出:由中兴通讯自主研发的星云大模型nebula coder-v6在推理专项排名中脱颖而出,获得了满分并列第一的成绩,并且在综合总榜单中荣获亚军(并列第…

    2026年10月5日 • 用户投稿
    100
  • 韩小圈在线平台入口_韩小圈网页版免费链接

    韩小圈在线平台入口_韩小圈网页版免费链接韩小圈在线平台入口_韩小圈网页版免费链接韩小圈在线平台入口_韩小圈网页版免费链接韩小圈在线平台入口_韩小圈网页版免费链接

    韩小圈在线平台入口是https://www.hanxiaoquan.com/,该平台提供韩国影视剧、电影、综艺资源,支持高清播放、弹幕互动、投屏及离线缓存,并设有讨论区和明星专区,方便用户追剧与交流。 韩小圈在线平台入口在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来韩小圈网页版免费链接,…

    2026年10月5日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信