Javascript 循环结构while do while for实例讲解

Javascript 循环结构while do while for实例讲解

目录

Javascript 循环结构while do while for实例讲解

一、while语句

二、do…while语句

三、for循环

疑难解答


 

我们从上一节课知道,JavaScript循环结构总有3种:

  • (1)while语句;
  • (2)do……while语句;
  • (3)for语句;

下面,我们对这些循环结构进行逐一讲解。

 

一、while语句

while语句是条件判断语句,也是循环语句。

语法:

while(条件表达式语句)
{执行语句块;
}

说明:

当“条件表达式语句”的返回值为true时,就会执行大括号“{}”中的语句块,当执行完大括号“{}”的语句块后,再次检测条件表达式的返回值,如果返回值还为true,则重复执行大括号“{}”中的语句块,直到返回值为false时,才结束整个循环过程,接着往下执行while代码段后面的程序代码。

举例:计算1+2+3+…+100的值

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">var n=1;var sum=0;while(n<=100){sum+=n;    //等价于sum=sum+n;n++;}document.write("1+2+3+…+100="+sum);</script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下:

 

5726886aed5846e9b82ef99d11621cde.png

使用while语句要注意以下几点:

(1)应该使用大括号“{}”包含多条语句,即使是一条语句也最好使用大括号;

(2)在循环体中应该包含使得循环可以退出的语句,比如上面的“i++”。对于循环体,要是没有条件,循环就会无休止地运作下去,变成一个“死循环”,从而可能导致浏览器崩溃;

 

二、do…while语句

“do…while语句”跟while语句是非常类似的,唯一的区别在于:while语句先判断是否符合条件,然后再执行循环体语句;do…while语句先执行循环体语句一次,然后再判断是否符合条件。

语法:

do
{执行语句块;
}
while(条件表达式语句);

说明:

do…while语句是先无条件执行循环体一次再判断是否符合条件的,如果符合条件,则重复执行循环体,如果不符合条件,则退出循环。

do…while语句结尾处的while条件语句的括号后有一个分号“;”,该分号一定不能省略,这是初学者非常非常容易忽略的一点,大家千万要记得呀。

举例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">var n=1;var sum=0;do{sum+=n;    //等价于sum=sum+n;n++;}while(n<=100)document.write("1+2+3+…+100="+sum);
</script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下:

 

5726886aed5846e9b82ef99d11621cde.png

分析:

大家拿上面一个例子和while语句的例子对比一下就知道,while语句和do…while语句是可以转换的。

在此总结一下两者之间的区别:

(1)do…while语句和while语句是可以相互转换的;

(2)do…while语句将先执行一遍循环体中的语句,然后才判断条件表达式的真假。这是它与while语句的本质区别;

 

三、for循环

for语句通常由2部分组成:一是“条件控制部分”,二是“循环体”。

语法:

for(初始化表达式;循环条件表达式;循环后的操作表达式)
{执行语句块;
}

说明:

在使用for循环之前要先设定一个计数器变量,可以在for循环之前定义,也可以在使用时直接进行定义。

上面的语法中,“初始化表达式”表示计数器变量的初始值;“循环条件表达式”是一个计数器变量的表达式,决定了计数器的最大值;

要想理解上面的语法,还不如直接看个例子。

举例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">for(var i=0;i<5;i++ ){document.write(i+"<br/>");}
</script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下:

 

22dc84e5b34bb4efe39f379058ade719.png

分析:

for(var i=0;i<5;i++ )
{document.write(i+"<br/>");
}

其实上面这段代码等价于下面这段代码:

while(i<5)
{document.write(i+"<br/>");i++;
}

大家可以在“在线运行”的代码中修改并测试一下效果。

对于for语句的语法形式大家可能一时接受不来,但是大家慢慢实践多了就会记住了。

 

疑难解答

为什么会出现死循环?

在使用for语句时,需要保证循环可以正常结束,也就是保证循环条件的结果存在不为true的情况,否则循环体会无限地执行下去,从而出现死循环现象。

例如:

i=5;
while(i!=4)
{document.write(i+"<br/>");i++;
}

上面这段代码就没有结束条件,因此会无限地执行下去。在JavaScript入门教程学习中,大家在写for语句的时候要特别地注意一下。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/313139.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络面试(1)】浏览器如何实现生成HTTP消息

我们经常会使用浏览器访问各种网站&#xff0c;获取各种信息&#xff0c;帮助解决工作生活中的问题。那你知道&#xff0c;浏览器是怎么帮助我们实现对web服务器的访问&#xff0c;并返回给我们想要的信息呢&#xff1f; 1. 浏览器生成HTTP消息 我们平时使用的浏览器有很多种&…

基于蜉蝣算法优化的Elman神经网络数据预测 - 附代码

基于蜉蝣算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于蜉蝣算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于蜉蝣优化的Elman网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针…

css原子化的框架Tailwindcss的使用教程(原始html和vue项目的安装与配置)

安装教程 中文官网教程 原始的HTML里面使用 新建文件夹npm init -y 初始化项目 安装相关依赖 npm install -D tailwindcss postcss-cli autoprefixer初始化两个文件 npx tailwindcss init -p根目录下新建src/style.css tailwind base; tailwind components; tailwind ut…

SpringBoot之入门使用

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 SpringBoot之入门使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、Spring缺点分析…

[区间动态规划] 棋盘分割

题目描述 ​ 将一个&#xff18;*&#xff18;的棋盘进行如下分割&#xff1a;将原棋盘割下一块矩形棋盘并使剩下部分也是矩形&#xff0c;再将剩下的部分继续如此分割&#xff0c;这样割了(n−1)次后&#xff0c;连同最后剩下的矩形棋盘共有 n 块矩形棋盘。(每次切割都只能沿…

Leetcode每日一题:1599.经营摩天轮的最大利润

前言&#xff1a;本题是一道逻辑细节题&#xff0c;考察阅读理解并转化为代码的能力&#xff0c;很多细节 题目描述&#xff1a; 你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱&#xff0c;但…

声明式导航传参详情

1 动态路由传参 路由规则path ->/article/:aid 导航链接 <router-link to"/article/1">查看第一篇文章</router-link> 组件获取参数: this.$route.params.aid 如果想要所有的值&#xff0c;就用this. $route. params 注意&#xff1a;这两个必须匹配…

STM32的在线升级(IAP)实现方法:BOOT+APP原理详解

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; STM32参考手册 1 在线升级&#xff08;IAP&#xff09;设计思路 为了实现STM32的在线升级&#xff08;IAP&#xff09;功能&#xff0c;通常会将STM32的FLASH划分为BOOT和APP两个部分&#xff0c;BOO…

[每周一更]-(第46期):Linux下配置Java所需环境及Java架构选型

Linux下配置Java所需环境及Java架构选型 一、配置基础环境 1.配置tomcat 环境变量 wget https://dlcdn.apache.org/tomcat/tomcat-10/v10.1.8/src/apache-tomcat-10.1.8-src.tar.gz tar -zxvf apache-tomcat-10.1.8-src.tar.gz 在/etc/profile 末尾追加export CATALINA_HOME…

排序算法-选择插入排序

文章目录 排序算法-选择插入排序 排序算法-选择插入排序 /// <summary>/// 选择插入排序/// Krystal 2023-11-10 09:02:06 每一次找一个最小的放到正确的位置上/// 直接选择排序通过每一轮的比较&#xff0c;找到最大值和最小值&#xff0c;将最大值的节点和右边交换&…

【快速全面掌握 WAMPServer】10.HTTP2.0时代,让 WampServer 开启 SSL 吧!

网管小贾 / sysadm.cc 如今的互联网就是个看脸的时代&#xff0c;颜值似乎成了一切&#xff01; 不信&#xff1f;看看那些直播带货的就知道了&#xff0c;颜值与出货量绝对成正比&#xff01; 而相对于 HTTP 来说&#xff0c;HTTPS 绝对算得上是高颜值的帅哥&#xff0c;即安…

【STM32】SPI通信

1 SPI通信 SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外设接口&#xff09;是由Motorola公司开发的一种通用数据总线 四根通信线&#xff1a;SCK&#xff08;Serial Clock&#xff0c;串行时钟&#xff09;、MOSI&#xff08;Master Output Slave Input&am…