0
点赞
收藏
分享

微信扫一扫

第三章 流程控制之--- 循环结构

互联网码农 2022-01-06 阅读 44

回顾

分支: if单分支,if else 双分支 if else if 多分支

​ if(范围条件){}

​ switch分支

​ switch(变量){

​ case 1:

​ break; // 可以省略

​ case 2:

​ break;

​ default: //可以省略

​ break;

​ }

第一节:while 循环

1.什么是循环

重复完成一项操作,重复做某一件事情

2.什么时候用循环

  1. 输出100次我能学会javascript

  2. 每天晚上给女朋友发短信

  3. 每个月收到通讯公司的缴费提醒

3.while循环语法:

语法:

// 固定次数的循环(输出100次我能学会javascript)
var 计数变量 = 0;
while(计数判断条件){
    //实现功能的代码块
    //计数变量的更新
}
固定次数循环四要素:
1. 计数变量 2.计数条件 3.功能代码块 4.计数变量更新



// 不定次数循环(吃包子),如果条件一直成立则代码块会被一直执行,如果条件不成立则循环结束
while(条件){
    //实现功能的代码块;
    //终止条件执行的代码块
}

执行流程:

当while后面的条件成立的时候,循环中的代码会被一直执行,直到条件不成立,循环终止。

3.1 固定次数循环

a. 输出100次我能学好javascript

 // 画图板的使用: win+r -> mspaint
			// 输出100次我能学会js
			var num = 1;
			while(num<=100){
				document.write("第"+num+"次我能学会js<br/>");
				//console.log("我能学会js<br/>");
				//alert("我能学会js<br/>");
				num++;
			}
			
			document.write("程序结束");

b.正序输出1-100个数:1,2,3,4...10

 // 输出1-100的数
			// 计算变量
			var i = 1;
			while(i<=100){
				document.write(i+"<br/>");
				i++;
			}
			document.write("循环结束");

c.倒序输出1-100个数: 100,99,98....1

//100,99,98, : 只要计数变量大于等1,那就要一直循环输出
			//             如果计数变量小于1,则终止循环
			var i = 100;
			while(i>=1){
				document.write(i+"<br/>");
				// 更新计数变量
				i--;
			}

d.输出1-100的偶数

// 什么是偶数: 2,4,6,8,10... 偶数的特征:能被2整除 代码: num%2==0

// var i = 1;
			// while(i<=100){
			// 	if(i%2==0){
			// 		document.write(i+"<br/>");
			// 	}
			// 	i++;
			// }
			
			var i = 2;
			while(i<=100){
				document.write(i+"<br/>");
				i+=2;
			}

e.输出1-100的奇数: 1,3,5,7,9 奇数:i%2==1

// 输出1-100奇数
			var i = 1;
			while(i<=100){
				if(i%2==1){
					document.write(i+"<br/>");
				}
				i++;
			}
			
			// 其它写法

f.求1-10的和

1+2+3+4+5+6+7+8+9+10 = 55

要素:1. 首先要有1-10个数 2.这些数依次累加存储起来

 //计数变量
			var i = 1;
			//累加和的变量
			var sum = 0;
			
			while(i<=10){
				document.write(i+"<br/>");
				// 将生成得数据累加到sum中
				sum = sum + i;
				// 计数更新
				i++;
			}
			
			document.write("1-10和:"+sum);

扩展: 输出1-100的和,输出1-100的奇数和,1-100的偶数和,1-100的3的倍数的和,100-200的和

g.从1累加到10,求当累加的和大于20的时候,累加的那个数是几

第二节:do while 循环(不经常使用,可以自学)

语法格式

do{
	代码块;
}while(条件表达式)
先执行再判断。

区别:do while 跟while 的区别

while:先判断再执行,如果条件不满足,可以一次都不执行。

do while :先执行再判断,就算是条件不满足,也会至少执行一次。

第三节:for 循环 (重点)

注意:这是重点,一定要自习的看完并且学会如何使用!

for循环主要用于固定次数循环: 1.计数变量 2.计数条件 3.功能代码块 4.计数变量更新

语法格式:

for(变量定义1;条件2;变量更新4){
    //功能代码块3
}

// 变形写法
for( ; ; ){
    
}

循环四要素:

1.计数变量初始化 2.条件判断 3.功能代码块 4.计数变量更新

执行流程:

程序遇到for循环,开始进入循环模式,

第一次:

先执行"变量定义1",接着执行"条件2",条件成立,执行"功能代码块3",接着执行"变量更新4"

第二次:

在"计数变量更新4"执行之后,直接进行“条件2”的执行,注意"变量定义1"只在第一次执行,之后就不再执行。

如果"条件2"成立,则执行“功能代码块3”,如果"条件2"不成立,则for循环结束。后面的执行都按照这个次序进行。

第三次:...

第四次...

直到条件不成立,结束执行

a. 输出100次我能学好javascript

// 使用for循环输出100次我能学会js
			for(var i = 1  ; i<=100  ; i++ ){
				document.write("第"+i+"次我能学会js<br/>");
			}

g.求100-200的和

// 输出100-200之间的数据,求和
			var sum = 0;
			for(var i=100;i<=200;i++){
				document.write(i+"<br/>");
				sum+=i;
			}
			document.write(sum);

h.从1累加到10,求当累加的和大于20的时候,累加的那个数是几

var sum = 0;
			for(var i=1;i<=10;i++){
				//document.write(i+"<br/>");
				sum+=i;
				if(sum>20){
					alert(i);
					// 结束循环
					break;
				}
			}

i. 循环输入3个学生的成绩并求总分和平均分

分析: 1. 是一个有次数的循环,循环3次 2. 在循环过程中要进行分数的输入,prompt() 3.累加输入的分数

 //循环输入3个学生的成绩并求总分和平均分
			
			/*分析:  1. 是一个有次数的循环,循环3次 
				    2. 在循环过程中要进行分数的输入,prompt() 
					3.累加输入的分数
			*/
		   // 定义累加变量
		   var sum = 0;
		   for (var i = 1; i <=3 ; i++) {
			   // 输入分数,并转为整形
				var score = Number(prompt("请输入第"+i+"个学生的分数:",""));
				document.write("第"+i+"个同学的分数是:"+score+"<br/>");
				sum += score;
		   }
		   // 输出三个学生的成绩和,平均分
		   document.write("总分:"+sum+" 平均分:"+(sum/3));
		   
		   // 扩展: 如果输入分数有误,则中断循环,并且提示错误。不输出总分平均分。

第四节:循环控制关键字

 

4.1. break: 直接结束循环

for (var i = 1; i <=10; i++) {
				// 如果i==5的时候,结束循环
				if(i==5){
					// 遇到break,循环就要结束
					break;
				}
				document.write(i+"<br/>");
			}
			
			document.write("程序结束");

            1
            2
            3
            4
            程序结束 

4.2. continue: 跳过当前循环后面的代码不执行,直接进行下一次循环

for (var i = 1; i <=10; i++) {
				if(i==5){
					// 遇到continue,后面的代码不执行,直接进入下次循环
					continue;
				}
				document.write(i+"<br/>");
			}
			document.write("程序结束");

运行结果如下:
1
2
3
4
6
7
8
9
10
程序结束 

第五节:循环嵌套

a. 输出2010-2020年的每一年的十二个月份

2010年 1月 2月 3月 4月...

2011年 1月 2月 3月 4月...

...

2020年 1月 2月 3月 4月...

// 外层输出年份
			for (var i = 2010; i <=2020; i++) {
				document.write(i+"年:");
				
				/*document.write("1月 ");
				document.write("2月 ");
				document.write("3月 ");
				document.write("4月 ");
				document.write("5月 ");
				document.write("6月 ");
				document.write("7月 ");
				document.write("8月 ");
				document.write("9月 ");
				document.write("10月 ");
				document.write("11月 ");
				document.write("12月 ");*/
				// 内层循环输出12个月份
				for(var j = 1;j<=12;j++ ){
					document.write(j+"月 ");
				}
				
				document.write("<br/>");
			}

b. 输出5行5列的星星

 

// 外层循环控制行数
			for(var i=1;i<=5;i++){
				// 内层循环控制输出的内容
				for(var j=1;j<=5;j++){
					document.write("*");
				}
				document.write("<br/>");
			}

c. 输出三角形的星星

// 外层循环控制行数
			for(var i=1;i<=5;i++){
				// 内层循环控制输出的内容
				// j跟随i进行变化
				for(var j=1;j<=i;j++){
					document.write("*");
				}
				document.write("<br/>");
			}

学到这里以后呢就可以自己琢磨着做一下9*9口诀表,下面我给大家展示一下最普遍的口诀表;

// 外层循环控制行数
			 for(var i=1;i<=5;i++){
			 	// 内层循环控制输出的内容
			 	for(var j=1;j<=i;j++){
			 		document.write(i+"*"+j+" ");
			 	}
			 	document.write("<br/>");
			 }

最后希望大家可以反向输出一下口诀表!

感谢大家观看!

 

举报

相关推荐

0 条评论