学习JS的第三天

学习JS的第三天

一、循环概念

​ 循环三要素：
1、循环起点
2、循环的结束条件
3、变量更新（便于跳出循环，是趋于循环结束条件）

二、while循环

语法结构 ：while(循环判断条件){  执行的代码}；

 //例如 打印1-10的数字
 var i = 1; //变量初始化 ，循环起点。
 while(i<=10){    //循环判定条件，
   console.log(i);   //控制台打印i
   i++;      //变量更新 
 }

注意点：

1、在循环开始前，必须对变量初始化（声明变量，给变量给个初始值）

2、如果while的条件为true，则会重复不断的执行循环体中的代码，如果条件为false，则退出循环。

3、在循环体中，必须有“变量更新”的语句。换句话说，两次循环的变量值不能一样，如果一样，会造成死循环。

三、死循环

​ 死循环指，循环结构因缺乏循环结束条件，而陷入无限循环的状态。

​

// 缺少变量更新
var i = 1;
while(i<=10){
      console.log(i);
    }
//判定条件一直为真
var i = 0;
while(true){   
console.log(i);
i++;
}

四、do while 循环（先斩后奏）

​ 语法：do{ 执行代码 }while();

// 例如  打印 1- 10 的数字
  var i = 0 ;  //变量初始化 ，循环起点。
  do{
   console.log(i);   //循环体
   i++;
  }while(i<=10);  //循环判定条件，也称结束条件

区别：do while与while 循环大体上是相同的，主要的区别是无论判定条件是否满足都将先执行一次！

五、双层嵌套循环

双层循环分为外循环和内循环，外循环执行一次，内循环执行一轮！

//打印 一个 三行三列的表格
var str="<table>";
 var i = 0;
while(i<3){      // 外层控制行数，
   str +="<tr>";
    var j = 0;
    while(j<3){    //内层控制列数 
       str += "<td></td>";
        j++;
       }
    str += "</tr>";
    i++;
 }
 str +="</table>";
 document.write(str);

//打印 99乘法表
 var str = '<table>';
 var i = 1;
 while(i<=9){
 	str += '<tr>';
 	 var j=1;
     // 第一轮 i = 1 j=1 <= i(i=1) 执行str j++ j=2<i=1不满足跳出  i++ 进入下一轮
     // 第二轮 i = 2 j=1 <= i(i=2) 执行str j++ j=2<=i 满足 执行str j++ j=3 不满足条件开始 i++ 开始下一轮
     // 第三轮 i = 3 j=1 <= i(i=3) 执行str j++ ... j++ j=4 j>i 跳出循环 i++ 开始下一轮
     //...
     // 第9轮 i = 9 j=1 <= i(i=3) 执行str ... j++ j=10 j>i 跳出循环 i++ i>9 循环结束
 	 while(j<=i){             
 		 str+= '<td>'+j+'&times;'+i+'='+j*i+'</td>';
 		 j++;
 	 }
 	str += '</tr>';
 	i++;
 }
 str += '</table>';
 ocument.write(str);

五、for 循环

​ 语法规则：for(变量初始化；判断条件；变量更新 ){ 执行代码}

span{
	border: 1px solid red;
	display: inline-block;
	width: 120px;
	height: 30px;
	text-align: center;
	margin: 10px;
	line-height: 30px;
}

//打印 9*9乘法表
  var str = '';
  for(var i=1 ; i<=9 ; i++ ){
     for(var j=1 ; j<=i ; j++){
         str +='<span>'+j+'&times;'+i+'='+j*i+'</span>';
     }
      str += '<br/>';
  }
document.write(str);

//打印 金字塔a
 var len =  	
 for(var i=0;i< ){
     
 }
/*	
		    1111*
			111**
			11***
			1****
			*****       要求出空格数 = 5 - i
				       空格数量 = 总行数 - 每一行星星的个数  1=&nbsp;
	  */
            //外层循环控制的是行
			//           1<=5 
			//           2<=5
			for(var i=1; i<=5; i++){
				//内层循环控制的是列
				//           1<=1   第一次的时候输出一颗星星
				//           2<=1 条件不满足，直接结束循环
				
				//           1<=2
				//           2<=2   第二次的时候输出两颗星星
				//           3<=2 条件不满足，直接结束循环
				//...
			  for(var j=1; j<=i; j++){
					document.write('●');
				}
				document.write('<br/>');
			}
			document.write('<hr/>');

			//任意打印多少行
			var len = prompt("请输入数字");
			for (var i = 0 ; i<=len ; i++ ) 
			{
					for(var j = 0 ; j<i-1 ; j++){
						document.write("a");
					}
				 document.write('<br/>');
			}
			//任意打印多少行金字塔
			var len = prompt("请输入数字");
			for (var i = 0 ; i<=len ; i++ ) 
			{		
					for (var k =0 ; k<len-i ; k++) {
						document.write('&nbsp;');
					}
					for(var j = 0 ; j<i ; j++){
						document.write("a");
					}
				 document.write('<br/>');
			}

六、break与continue

break语句:

描述：

• break语句，用于无条件结束各种循环和switch。

• 说明：一般情况下，需要在break语句之前加一个条件判断。换句话说：就是条件成立了，就退出循环。

• break只能跳出单层循环，不能一次跳出多重循环。

  for(var i=1; i<=100; i++)
  {   
  	 //超过50的不再要
  	if(i==50)
  	{
  		break; //跳出循环，跳到for的大括号之后了。break之后的所以语句终止执行
          
  			//break只能跳出单层循环，不能一次跳出多重循环
  	 }
  	document.write(i+" ");
  }
  

  实现效果： 1 2 3 4. . . 49 //在 i= 50时结束循环

continue语句：

描述：结束本次循环，而开始下次循环。

说明：一般情况下，需要在continue语句之前加一个条件判断。

for(var i=1; i<=100; i++)
{   
	 //超过50的不再要
	if(i==50)
	{
		continue; //跳过当前次循环，执行下一次 
        
			//continue 不结束循环，
	 }
	document.write(i+" ");
}

实现效果： 1 2  3 4. . . 49  51 52  53....100  //只跳过50这次

七、循环区别

​ while ：

​ 1、在循环次数不确定的时候使用。

​ 2、while的效率相对for循环更低。

​ 3、在不知道循环次数情况下，适用的场景更多。

​ do while:

​ 1、无论判定条件是否满足都将先执行一次！

​ for 循环：

​ 1、for循环效率更加高相较于while循环

​ 2、语法相较于更加严谨

​ 3、for循环对循环次数要求更加明确