JavaScript笔记 (10.JavaScript循环语句)

本文最后更新于：6 个月前

循环语句

while语句

通过循环语句可以反复的执行一段代码多次

1
2
3
4
5
6
7
8
9
10
11
12
while循环:
		  	- 语法：
		  		while(条件表达式){
		  			语句...
		  		}
		  
		  	- while语句在执行时，
		  		先对条件表达式进行求值判断，
		  			如果值为true，则执行循环体，
		  				循环体执行完毕以后，继续对表达式进行判断
		  				如果为true，则继续执行循环体，以此类推
		  			如果值为false，则终止循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
do...while循环
		  	- 语法：
		  		do{
		  			语句...
		  		}while(条件表达式)
		  
		  	- 执行流程：
		  		do...while语句在执行时，会先执行循环体，
		  			循环体执行完毕以后，在对while后的条件表达式进行判断，
		  			如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
		  			如果结果为false，则终止循环
		  
		  		实际上这两个语句功能类似，不同的是while是先判断后执行，
		  			而do...while会先执行后判断，
		  		do...while可以保证循环体至少执行一次，
		  			而while不能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//向这种将条件表达式写死为true的循环，叫做死循环
//该循环不会停止，除非浏览器关闭，死循环在开发中慎用
//可以使用break，来终止循环
                while(true){
                    alert(n++);

                    //判断n是否是10
                    if(n == 10){
                        //退出循环
                        break;
                    }
                }
//创建一个循环，往往需要三个步骤			
//1.创初始化一个变量						
//2.在循环中设置一个条件表达式		
//3.定义一个更新表达式，每次更新初始化变量
while练习1

假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
			 * 
			 * 1000 1000*1.05
			 * 1050 1050*1.05
			 */		
			//定义一个变量，表示当前的钱数
			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>

while练习2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>if练习1</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循环

for语句，也是一个循环语句，也称为for循环、

1
2
3
4
在for循环中，为我们提供了专门的位置用来放三个表达式：
        1.初始化表达式
        2.条件表达式
        3.更新表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
for循环的语法：
                for(①初始化表达式;②条件表达式;④更新表达式){
                    ③语句...
                }
 for循环的执行流程：
                 ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
                 ②执行条件表达式，判断是否执行循环。
                 如果为true，则执行循环③d
                 如果为false，终止循环
                 ④执行更新表达式，更新表达式执行完毕继续重复②
                 
 for循环中的三个部分都可以省略，也可以写在外部
 如果在for循环中不写任何的表达式，只写两个;
 此时循环是一个死循环会一直执行下去，慎用
                 for(;;){
                     alert("hello");
                 }
for循环的嵌套:

以99乘法表为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 1.打印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
			 * 
			 * 2.打印出1-100之间所有的质数
			 */		
			//创建外层循环，用来控制乘法表的高度
			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;
			}
			
			span{
				display: inline-block;//使式子对齐（通过设置span的宽度）
				width: 80px;
			}			
		</style>
	</head>
	<body>
	</body>
</html>

break和continue关键字
break

break关键字可以用来退出switch或循环语句
不能在if语句中使用break和continue

1
2
3
4
5
6
7
for(var i=0 ; i<5 ; i++){
	console.log(i);
	if(i == 2){
		break;//这里的break是用于外面的for的
	}
	
}

break关键字，会立即终止离他最近的那个循环语句

1
2
3
4
5
6
7
8
9
10
11
12
* 可以为循环语句创建一个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关键字可以用来跳过当次循环
同样continue也是默认只会对离他最近的循环循环起作用

for循环练习1：100以内奇数和
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 打印1-100之间所有奇数之和
			 */
			
			//创建一个变量，用来保存奇数之和
			//var sum = 0;
			
			//打印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>
for循环练习2：打印1-100之间所有7的倍数的个数及总和
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">			
			/*
			 * 打印1-100之间所有7的倍数的个数及总和
			 */
			//定义一个变量，来保存总和
			var sum = 0;
			//定义一个计数器，来记录数量
			var count = 0;
			
			//打印1-100之间所有的数
			for(var i=1 ; i<=100 ; i++){
				
				//判断i是否是7的倍数
				if(i % 7 == 0){
					//console.log(i);
					sum += i;
					//使计数器自增1
					count++;				
				}			
			}			
			//输出总和
			console.log("总和为:"+sum);
			//输出总数
			console.log("总数量为:"+count);	
		</script>
	</head>
	<body>
	</body>
</html>
for循环练习3：水仙花数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
for循环练习4：判断质数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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++){
					//console.log(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>

计算机及嵌入式软件 > 编程语言 > JavaScript
#JavaScript
JavaScript笔记 (10.JavaScript循环语句)
https://www.duruofu.xyz/2023/06/05/3.软件相关/编程语言/JS/2.12 循环语句/
作者
DuRuofu
发布于
2023年6月5日
更新于
2024年1月5日
许可协议