JS-----第三章 js循环

回顾

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

​ if(范围条件){}

​ switch分支

​ switch(变量){

​ case 1:

​ break; // 可以省略

​ case 2:

​ break;

​ default: //可以省略

​ break;

​ }

本章内容

 循环的使用:

1.while(重点)

2.do..while(自己研究)

3.for (重点)

1.while循环 1.1.什么是循环

重复完成一项 *** 作，重复做某一件事情

1.2.什么时候用循环 输出100次我能学会javascript每天晚上给女朋友发短信每个月收到通讯公司的缴费提醒 1.3.while循环语法：

语法:

// 固定次数的循环(输出100次我能学会javascript)
var 计数变量 = 0;
while(计数判断条件){
    //实现功能的代码块
    //计数变量的更新
}
固定次数循环四要素:
1. 计数变量 2.计数条件 3.功能代码块 4.计数变量更新
​
​
// 不定次数循环(吃包子)，如果条件一直成立则代码块会被一直执行，如果条件不成立则循环结束
while(条件){
    //实现功能的代码块;
    //终止条件执行的代码块
}

执行流程：

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

1.3.1 固定次数循环

a. 输出10次我能学好javascript

// 输出10次我能学好js
	var i = 1;
	while(i<=10){
		document.write("第" +i+ "次:我能学好js
");
		i++;
	}

	document.write("
");

	// 如何实现倒序输出
	var j = 10;
	while(j>=1){
		document.write("第" +j+ "次:我能学好js
");
		j--;
	}

b.正序输出1-100个数：1，2，3，4...10

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

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

 //100,99,98, : 只要计数变量大于等1，那就要一直循环输出
            //             如果计数变量小于1，则终止循环
            var i = 100;
            while(i>=1){
                document.write(i+"
");
                // 更新计数变量
                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+"
");
            //  }
            //  i++;
            // }
            
            var i = 2;
            while(i<=100){
                document.write(i+"
");
                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+"
");
                }
                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+"
");
                // 将生成得数据累加到sum中
                sum = sum + i;
                // 计数更新
                i++;
            }
            
            document.write("1-10和:"+sum);

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

  // 定义计数变量
            var i=1;
            // 定义累加和的变量
            var sum = 0;
            
            while(i<=10){
                if(i%2==0){
                    //document.write(i+"
");
                    // 累加1-10中的偶数
                    sum =  sum+i;
                    
                    //alert(sum);
                }
                //变量更新
                i++;
            }
            // 循环结束，输出结果
            alert(sum);

1.3.2 不定次数循环

a. 吃包子，每次吃一个，直到吃饱为止

// 不定次数循环: 吃包子，每次吃一个，询问一下，是否吃饱。直到吃饱为止
            while(true){
                
                document.write("吃一个包子
");
                
                var answer = prompt("请问吃饱没有","");
                
                // 结束条件:吃饱为止
                if(answer=="吃饱了"){
                    // 结束循环
                    break;
                }
                
            }

// 不定次数循环: 吃包子，每次吃一个，询问一下，是否吃饱。直到吃饱为止
            // 统计吃包子的次数
            var i = 0;
            
            while(true){
                
                document.write("吃一个包子
");
                // 吃完一个累加一次
                i++;
                
                var answer = prompt("请问吃饱没有","");
                
                // 结束条件:吃饱为止
                if(answer=="吃饱了"){
                    // 结束循环
                    break;
                }
                
            }
            
            // 扩展: 统计吃了几个包子吃饱了
            document.write("一共吃了:"+i+"个包子");

2.do while 循环（自学）

语法格式

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

区别：do while 跟while 的区别

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

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

 while和do..while的区别:

1.while先判断条件，再执行代码,do..while先执行一次，再判断条件

2.当条件不成立的时候，while的代码块一次都不执行，但是do..while至少执行一次

 var i = 11;
            // while: 先判断条件，再执行代码块
            while(i<=10){
                document.write(i+"
");
                i++;
            }
            
            document.write("
");
            // 计数变量
            var j = 11;
            
            // 先执行一次代码块，再进行判断
            do{
                document.write(j+"
");
                //计数变量更新
                j++;
                
            }while(j<=10);

3.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循环结束。后面的执行都按照这个次序进行。

第三次:...

第四次...

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

3.1 for循环的使用

a. 输出100次我能学好javascript

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

b.正序输出1-100个数

c.倒序输出1-100个数

d.输出1-100的偶数

e.输出1-100的奇数

f.求1-10的和

g.求100-200的和

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

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

            var sum = 0;
            for(var i=1;i<=10;i++){
                //document.write(i+"
");
                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+"
");
                sum += score;
           }
           // 输出三个学生的成绩和,平均分
           document.write("总分:"+sum+" 平均分:"+(sum/3));
           
           // 扩展: 如果输入分数有误，则中断循环，并且提示错误。不输出总分平均分。

4.循环控制关键字

4.1. break: 直接结束循环

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

 //控制循环执行的关键字:break,continue
	//break:当在循环的过程中，满足了某个条件，执行了break
	//      会让循环直接终止
	//continue:当在循环的过程中，满足了某个条件，执行了continue
	//        那么本轮循环continue后面的代码不会被执行，直接进入下次循环
	
	/*
	for(var i=1;i<=10;i++){
		//document.write(i+"
"); //12345
		if(i==5){
			//退出循环
			break;
		}
		document.write(i+"
");  // 1234
	}*/

	for(var i=1;i<=10;i++){
		//document.write(i+"
"); //123456789 10
		if(i==5){
			//执行了continue，则本轮循环continue后面的代码会被跳过,
			//直接进入下次循环
			continue;
		}
		document.write(i+"
"); //1234 678910
	}

//题目:循环输入3个学生的分数求总分平均分
	//要求:1.如果所有的分数都是正常的(0-100)，则计算总分和平均分并输出
	//     2.如果有任何一个分数输入错误，则终止循环，提示错误，并且不能输出总分和平均分
	var sum = 0;
	// 定义变量，来记录输入的过程中是否有误
	var error = false;
	for(var i=1;i<=3;i++){
		// 输入分数
		var score= Number(prompt("请输入第"+i+"个学生的分数:",""));
		// 判断分数是否合法
		if(score<0 || score>100){
			error = true;
			// 中断循环
			break;
		}
		// 分数合法则累加分数
		sum+=score;
	}

	//判断错误变量的状态
	if(error==true){
		document.write("分数输入有误，无法计算")
	}else{
		document.write("总分:"+sum+" 平均分:"+sum/3);
	}

 

//统计80分以上的学生比例，用continue实现
	//5个学生:90,76,89,23,45  2/5 = 40%

	// 记录80分以上的人数
	var count = 0;
	for(var i=1;i<=5;i++){
		var score = Number(prompt("请输入第"+i+"个学生的分数:",""));

		//正向思维:大于80累加人数
		/*if(score>=80){
			//计数累加
			count++;
		}*/

		//逆向思维:小于80不加人数
		if(score<80){
			continue;
		}

		count++;
	}

	document.write("80分以上的人数:"+count+" 所占比例:"+(count/5)*100+"%");

5.循环嵌套

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("
");
            }

b. 输出5行5列的星星

 

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

c. 输出三角形的星星

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

d.输出九九乘法表

 

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

总结

3种循环结构

while do while for

可以通过循环解决一些问题。