②JavaScript 流程控制语句

爱被打了一巴掌 2023-07-22 09:29 31阅读 0赞

### JavaScript ###

*  语句
 *  代码块
 *  流程控制语句
 *   *  1.条件判断语句
     *  2.条件分支语句
     *  3.循环语句
     *   *  while循环
         *   *  例 ※
         *  for循环
         *  嵌套for循环
         *   *  99乘法表练习 ※
             *  质数练习 ※
     *  break和continue ※

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# 语句 #

• 前边的表达式和运算符等内容可以理解成是一门语言中的单词，短语。

• 而语句（statement）就是这个语言中一句一句完整的话。

• 语句是一个程序的基本单位，JS的程序就是由一条一条语句构成的，每一条语句使用`;`结尾。

• JS中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序

--------------------

# 代码块 #

• 代码块是在大括号 \{\} 中所写的语句，以此将多条语句的集合视为一条语句来使用。它们要么都执行，要么都不执行。

• 例如：  
![在这里插入图片描述][20200405164959479.png]  
• 我们一般使用代码块将需要一起执行的语句进行分组，需要注意的是，代码块结尾不需要加分号。

• JS中的代码块，只具有分组的的作用，没有其他的用途。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 我们的程序是由一条一条语句构成的 * 语句是按照自上向下的顺序一条一条执行的 * 在JS中可以使用{}来为语句进行分组, * 同一个{}中的语句我们称为是一组语句， * 它们要么都执行，要么都不执行， * 一个{}中的语句我们也称为叫一个代码块 * 在代码块的后边就不用再编写;了 * * JS中的代码块，只具有分组的的作用，没有其他的用途 * 代码块内容的内容，在外部是完全可见的 */ { var a = 10; alert("hello"); console.log("你好"); document.write("语句"); } console.log("a = "+a); </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

# 流程控制语句 #

*  JS中的程序是从上到下一行一行执行的
 *  通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行
 *  语句的分类：1.条件判断语句 2.条件分支语句 3.循环语句

因为接下来的部分和Java的使用基本是相同的，所以这里不再赘述（我也相信大家都不是零基础）。如果有具体用法不了解，可以慢慢理解，或者百度查阅。

--------------------

## 1.条件判断语句 ##

*  使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。
 *  语法一：  
    ![在这里插入图片描述][20200405170031181.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 流程控制语句 * - JS中的程序是从上到下一行一行执行的 * - 通过流程控制语句可以控制程序执行流程， * 使程序可以根据一定的条件来选择执行 * - 语句的分类： * 1.条件判断语句 * 2.条件分支语句 * 3.循环语句 * * * 条件判断语句： * - 使用条件判断语句可以在执行某个语句之前进行判断， * 如果条件成立才会执行语句，条件不成立则语句不执行。 * - if语句 * - 语法一： * if(条件表达式){ * 语句... * } * * if语句在执行时，会先对条件表达式进行求值判断， * 如果条件表达式的值为true，则执行if后的语句， * 如果条件表达式的值为false，则不会执行if后的语句。 * if语句只能控制紧随其后的那个语句, * 如果希望if语句可以控制多条语句， * 可以将这些语句统一放到代码块中 * if语句后的代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句 */ var a = 25; if(a > 10 && a <= 20){ alert("a大于10，并且 a小于等于20"); } </script>
    	</head>
    	<body>
    	</body>
    </html>

*  语法二：  
    ![在这里插入图片描述][20200405170230873.png]
 *  语法三：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * if语句 * 语法二: * if(条件表达式){ * 语句... * }else{ * 语句... * } * * if...else...语句 * 当该语句执行时，会先对if后的条件表达式进行求值判断， * 如果该值为true，则执行if后的语句 * 如果该值为false，则执行else后的语句 * * 语法三： * if(条件表达式){ * 语句... * }else if(条件表达式){ * 语句... * }else if(条件表达式){ * 语句... * }else{ * 语句... * } * * if...else if...else * 当该语句执行时，会从上到下依次对条件表达式进行求值判断 * 如果值为true，则执行当前语句。 * 如果值为false，则继续向下判断。 * 如果所有的条件都不满足，则执行最后一个else后的语句 * 该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句 */ var age = 50; /* if(age >= 60){ alert("你已经退休了~~"); }else{ alert("你还没退休~~~"); } */ age = 90; if(age > 17 && age <= 30){ alert("你已经成年了"); }else if(age > 30 && age <= 60){ alert("你已经中年了"); }else if(age > 60 && age <= 80){ alert("你已经退休了"); }else{ alert("你岁数挺大的了~~"); } </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

## 2.条件分支语句 ##

语法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 条件分支语句也叫switch语句 * 语法： * switch(条件表达式){ * case 表达式: * 语句... * break; * case 表达式: * 语句... * break; * default: * 语句... * break; * } * * 执行流程： * switch...case..语句 * 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较， * 如果比较结果为true，则从当前case处开始执行代码。 * 当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字， * 这样可以确保只会执行当前case后的语句，而不会执行其他的case * 如果比较结果为false，则继续向下比较 * 如果所有的比较结果都为false，则只执行default后的语句 * * switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能， * 同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。 */ //根据num的值，输出对应的中文 var num = 3; /*if(num == 1){ console.log("壹"); }else if(num == 2){ console.log("贰"); }else if(num == 3){ console.log("叁"); }*/ num = "hello"; switch(num){ case 1: console.log("壹"); //使用break可以来退出switch语句 break; case 2: console.log("贰"); break; case 3: console.log("叁"); break; default: console.log("非法数字~~"); break; } </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

## 3.循环语句 ##

### while循环 ###

![在这里插入图片描述][20200405170746853.png]  
![在这里插入图片描述][20200405170756259.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 循环语句： * 通过循环语句可以反复的执行一段代码多次 * * while循环 * - 语法： * while(条件表达式){ * 语句... * } * * - while语句在执行时， * 先对条件表达式进行求值判断， * 如果值为true，则执行循环体， * 循环体执行完毕以后，继续对表达式进行判断 * 如果为true，则继续执行循环体，以此类推 * 如果值为false，则终止循环 * * do...while循环 * - 语法： * do{ * 语句... * }while(条件表达式) * * - 执行流程： * do...while语句在执行时，会先执行循环体， * 循环体执行完毕以后，在对while后的条件表达式进行判断， * 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推 * 如果结果为false，则终止循环 * * 实际上这两个语句功能类似，不同的是while是先判断后执行， * 而do...while会先执行后判断， * do...while可以保证循环体至少执行一次， * 而while不能 */ //向这种将条件表达式写死为true的循环，叫做死循环 //该循环不会停止，除非浏览器关闭，死循环在开发中慎用 //可以使用break，来终止循环 /* var n = 1; while(true){ alert(n++); //判断n是否是10 if(n == 10){ //退出循环 break; } }*/ //创建一个循环，往往需要三个步骤 //1.创初始化一个变量 var i = 11; //2.在循环中设置一个条件表达式 while(i <= 10){ //3.定义一个更新表达式，每次更新初始化变量 document.write(i++ +"<br />") } /*do{ document.write(i++ +"<br />"); }while(i <= 10);*/ </script>
    	</head>
    	<body>
    	</body>
    </html>

小练习：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年 */ //定义一个变量，表示当前的钱数 var money = 1000; //定义一个计数器 var count = 0; //定义一个while循环来计算每年的钱数 while(money < 5000){ money *= 1.05; //使count自增 count++; } //console.log(money); console.log("一共需要"+count+"年"); </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

#### 例 ※ ####

这里用到了之前没使用过的语句`prompt();`，现在我们可以手动向其中输入数字了。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>练习</title>
    		<script type="text/javascript"> /* * 从键盘输入小明的期末成绩: * 当成绩为100时，'奖励一辆BMW' * 当成绩为[80-99]时，'奖励一台iphone15s' * 当成绩为[60-80]时，'奖励一本参考书' * 其他时，什么奖励也没有 */ /* * prompt()可以弹出一个提示框，该提示框中会带有一个文本框， * 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数， * 该字符串将会作为提示框的提示文字 * * 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容 */ //将prompt放入到一个循环中 while(true){ //score就是小明的期末成绩 var score = prompt("请输入小明的期末成绩(0-100):"); //判断用户输入的值是否合法 if(score >= 0 && score <= 100){ //满足该条件则证明用户的输入合法，退出循环 break; } alert("请输入有效的分数！！！"); } //判断值是否合法 if(score > 100 || score < 0 || isNaN(score)){ alert("拉出去毙了~~~"); }else{ //根据score的值来决定给小明什么奖励 if(score == 100){ //奖励一台宝马 alert("宝马，拿去~~~"); }else if(score >= 80){ //奖励一个手机 alert("手机，拿去玩~~~"); }else if(score >= 60){ //奖励一本参考书 alert("参考书，拿去看~~~"); }else{ alert("棍子一根~~"); } } </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

### for循环 ###

![在这里插入图片描述][20200405172554587.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * for语句，也是一个循环语句，也称为for循环 * 在for循环中，为我们提供了专门的位置用来放三个表达式： * 1.初始化表达式 * 2.条件表达式 * 3.更新表达式 * * for循环的语法： * for(①初始化表达式;②条件表达式;④更新表达式){ * ③语句... * } * * for循环的执行流程： * ①执行初始化表达式，初始化变量（初始化表达式只会执行一次） * ②执行条件表达式，判断是否执行循环。 * 如果为true，则执行循环③ * 如果为false，终止循环 * ④执行更新表达式，更新表达式执行完毕继续重复② */ //创建一个执行10次的while循环 for(var i = 0 ; i < 10 ; i++ ){ alert(i); } /* * for循环中的三个部分都可以省略，也可以写在外部 * 如果在for循环中不写任何的表达式，只写两个; * 此时循环是一个死循环会一直执行下去，慎用 * for(;;){ alert("hello"); } */ </script>
    	</head>
    	<body>
    	</body>
    </html>

小练习：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 打印1-100之间所有奇数之和 */ //sum用来保存奇数之和 //打印1-100之间的数 for(var i = 1 , sum = 0 ; i <= 100 ; i++){ //判断i是否是奇数 //不能被2整除的数就是奇数 if(i % 2 != 0){ //如果i除以2有余数则证明i是奇数 //console.log(i); sum = sum + i; } } console.log("奇数之和为 : "+sum); </script>
    	</head>
    	<body>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 水仙花数是指一个3位数，它的每个位上的数字的3 次幂之和等于它本身。 （例如：1^3 + 5^3 + 3^3 = 153）,请打印所有的水仙花数。 */ //打印所有的三位数 for(var i=100 ; i<1000 ; i++){ //获取i的百位 十位 个位的数字 //获取百位数字 var bai = parseInt(i/100); //获取十位的数字 var shi = parseInt((i-bai*100)/10); //获取个位数字 var ge = i % 10; //判断i是否是水仙花数 if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){ console.log(i); } } </script>
    	</head>
    	<body>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 在页面中接收一个用户输入的数字，并判断该数是否是质数。 质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。 */ var num = prompt("请输入一个大于1的整数:"); //判断这个值是否合法 if(num <= 1){ alert("该值不合法！"); }else{ //创建一个变量来保存当前的数的状态 //默认当前num是质数 var flag = true; //判断num是否是质数 //获取2-num之间的数 for(var i=2 ; i<num ; i++){ //判断num是否能被i整除 if(num % i == 0){ //如果num能被i整除，则说明num一定不是质数 //设置flag为false flag = false; } } //如果num是质数则输出 if(flag){ alert(num + "是质数！！！"); }else{ alert("这个不是质数") } } </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

### 嵌套for循环 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript"> /* 通过程序，在页面中输出如下的图形： * 1 <1 i=0 ** 2 <2 i=1 *** 3 <3 i=2 **** 4 <4 i=3 ***** 5 <5 i=4 ***** ***** ***** ***** ***** ***** 1 j<5(5-0) i=0 **** 2 j<4(5-1) i=1 *** 3 j<3(5-2) i=2 ** 4 j<2(5-3) i=3 * 5 j<1(5-4) i=4 */ //通过一个for循环来输出图形 //这个for循环执行几次，图形的高度就是多少 //它可以用来控制图形的高度 for(var i=0 ; i<5 ; i++){ /* * 在循环的内部再创建一个循环，用来控制图形的宽度 * 目前我们的外部的for循环执行1次，内部的就会执行5次 * 内层循环可以来决定图形的宽度，执行几次图形的宽度就是多少 */ /*for(var j=0 ; j<i+1 ; j++){ document.write("*   "); }*/ for(var j=0 ; j<5-i ; j++){ document.write("*   "); } //输出一个换行 document.write("<br />"); } </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

#### 99乘法表练习 ※ ####

这里使用了，JS和CSS的简单运用。

也许第一次看到这个用法无法理解。其实道理很简单。当你写一篇文章，或者空间日志，肯定会看到有加粗、斜体、添加图片等相关操作，这些操作是如何实现的？其实就是使用了css样式，只是我们看不到标签而已。当你去尝试在其中手动写相关标签时，就会发现有时是有作用的（当然不是所有标签，貌似也不能手动加样式）。而document.write就是向页面中写内容，就相当于我们写一篇日志。这时加了相关标签，如果能为其设置样式，那么在页面中就会显示相关效果。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 打印99乘法表 * 1*1=1 * 1*2=2 2*2=4 * 1*3=3 2*3=6 3*3=9 * 1*4=4 2*4=8 3*4=12 4*4=16 * ....9*9=81 */ //创建外层循环，用来控制乘法表的高度 for(var i=1 ; i<=9 ; i++ ){ //创建一个内层循环来控制图形的宽度 for(var j=1 ; j<=i ; j++){ document.write("<span>"+j+"*"+i+"="+i*j+"</span>"); } //输出一个换行 document.write("<br />"); } </script>
    		
    		<style type="text/css"> body{ width: 2000px; color: black; } span{ background-color: skyblue; display: inline-block; width: 80px; } </style>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

#### 质数练习 ※ ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * 打印出1-100之间所有的质数 */ //打印2-100之间所有的数 for(var i=2 ; i<=100 ; i++){ //创建一个布尔值，用来保存结果，默认i是质数 var flag = true; //判断i是否是质数 //获取到2-i之间的所有的数 for(var j=2 ; j<i ; j++){ //判断i是否能被j整除 if(i%j == 0){ //如果进入判断则证明i不是质数,修改flag值为false flag = false; } } //如果是质数，则打印i的值 if(flag){ console.log(i); } } </script>
    	</head>
    	<body>
    	</body>
    </html>

补充：

这里用到了计时器和开方语句，运用开方可以更快的判断是否为质数。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> //测试如下的程序的性能 //在程序执行前，开启计时器 //console.time("计时器的名字")可以用来开启一个计时器 //它需要一个字符串作为参数，这个字符串将会作为计时器的标识 console.time("test"); //可以通过Math.sqrt()对一个数进行开方 //var result = Math.sqrt(97); //console.log("result = "+result) //打印2-100之间所有的数 for(var i=2 ; i<=100 ; i++){ var flag = true; for(var j=2 ; j<=Math.sqrt(i) ; j++){ if(i%j == 0){ //如果进入判断则证明i不是质数,修改flag值为false flag = false; //一旦进入判断，则证明i不可能是质数了，此时循环再执行已经没有任何意义了 //使用break来结束循环 break; } } //如果是质数，则打印i的值 if(flag){ console.log(i); } } //终止计时器 //console.timeEnd()用来停止一个计时器，需要一个计时器的名字作为参数 console.timeEnd("test"); </script>
    	</head>
    	<body>
    	</body>
    </html>

--------------------

## break和continue ※ ##

这里使用到了一个Java中没有的语句，`label: 循环语句`，它可以标识当前的循环。  
在使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript"> /* * break关键字可以用来退出switch或循环语句 * 不能在if语句中使用break和continue * break关键字，会立即终止离他最近的那个循环语句 */ /*for(var i=0 ; i<5 ; i++){ console.log(i); if(i == 2){ break; } }*/ /*for(var i=0 ; i<5 ; i++){ console.log("@外层循环"+i) for(var j=0 ; j<5; j++){ break; console.log("内层循环:"+j); } }*/ /* * 可以为循环语句创建一个label，来标识当前的循环 * label:循环语句 * 使用break语句时，可以在break后跟着一个label， * 这样break将会结束指定的循环，而不是最近的 */ outer: for(var i=0 ; i<5 ; i++){ console.log("@外层循环"+i) for(var j=0 ; j<5; j++){ break outer; console.log("内层循环:"+j); } } /* * continue关键字可以用来跳过当次循环 * 同样continue也是默认只会对离他最近的循环循环起作用 */ /*for(var i=0 ; i<5 ; i++){ if(i==2){ continue; } console.log(i); }*/ /* outer: for(var i=0 ; i<5 ; i++){ for(var j=0 ; j<5 ; j++){ continue; console.log("-->"+j); } console.log("@--->"+i); } */ </script>
    	</head>
    	<body>
    	</body>
    </html>

[20200405164959479.png]: /images/20230528/44b7add6cc8446b0807ca7a6653efbbc.png
[20200405170031181.png]: /images/20230528/283c7a91fa6d405984fbfab5cdebd39b.png
[20200405170230873.png]: /images/20230528/c03d093207d9436080fab9ee94229a5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20230528/c3a81d3146bf4a46874240a7c9b9a0a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20230528/7a28a0d96ad8453384f9063ab9477b89.png
[20200405170746853.png]: /images/20230528/2cf70d7339b843a0bf5dbfa8363aa344.png
[20200405170756259.png]: /images/20230528/43a84c93328c4a328d120c95652b9f27.png
[20200405172554587.png]: /images/20230528/f3239b13ac534860af6cf87cf5e100e1.png