小白学JavaScript的第六天

六、Javascript循环基础语法

（一）for循环

语法结构

for(var i=0;i<=10;i++){
	console.log(i);//iiiiiiiiii
}

for(初始化变量; 条件表达式; 操作表达式 ){ 
    （语句）循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用var 关键字声明新的变量，这个变量帮我们来记录次数。

条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

执行步骤：

​ 第一步：初始化变量 i=0;

​ 第二部：循环条件判断

​ 如果条件为真，执行循环体，执行第三步

​ 如果条件为假，结束循环

​ 第三步：执行循环迭代，回到第二步

案例1：输出0-10之间的整数（包含10）

for(var i=0;i<=10;i++){
         console.log(i);;
         }

案例2：输出0-10之间的整数和（包含10）

var sum=0;//存的和
for(var i=0;i<=10;i++){
 //sum=sum+i;// sum+=i;
  sum+=i;
 //  console.log(i,sum);        
 }
 console.log('和是'+sum);   

案例3 求0 -10之间奇数的和

var sum = 0;  // 注意： 一、sum  赋初值   二、sum不能放在循环内部
    for (var i = 0; i <= 10; i++) {          
            if (i % 2 != 0) {
                sum += i;
            }
      }
     console.log('奇数的和' + sum);

案例4 盒子中有5个小球 ，将所有的小球的取出

for(var i=1;i<=5;i++){
         console.log('第'+i+'球');
   }

案例5 求0-10以内偶数和（不包含10） 0 2 4

var sum=0;
  for(var i=0;i<10;i+=2){
           sum+=i;
       }
  console.log(sum);

（二）while循环

1.while循环

​ 语法结构

while (条件表达式) {
// 循环体代码
}

​ 执行过程：

当循环条件为true时，则执行循环体，当循环条件为false时，结束整个循环

注意，若循环条件永远为true时，则出现死循环，根据开发实际需要，在循环体中设置出口，即循环结束的条件

案例

//计算100以内奇数的和
  var i=0,sum=0;
   while(i<=100){
       if(i%2!=0){
            sum+=i; 
        }
        i++;
     }
  console.log('100以内奇数的和'+sum);

2.do-while循环

​ 语法结构

do{
// 循环体代码
}while( 条件表达式 )

​ 执行过程：

do-while循环和while循环相比，会在判断条件表达式之前无条件的先去执行一次循环体后再判断条件

案例

var i=0; 
   do{ 
      document.write(i +' hello world <br>');
      i++; 
  } while (i>3)

（三）break和continue的用法

continue：结束本次循环，调到下一次循环

break：结束整个循环

1.continue

///求0-10之间奇数的和
let sum=0;
for(let i=0;i<=10;i++){
	if(i%2==0){
	continue;//跳过本次循环，继续下次循环（循环迭代）永远执行不到
}
sum+=i;
}
console.log(sum);

2.break

for(let i=0;i<=10;i++){
	if(i==5){
	break;
	}
	console.log("i="+i); //  0 1 2 3 4
}

（四）双重for循环

//双重循环
//外层循环 控制 行数
for (var i = 0; i < 3; i++) {
// 内层循环 控制每行星的的个数
   for (var j = 0; j < 5; j++) {
       document.write('*');
   }
   document.write('<br>')
}

效果图

外层循环每循环一次，都会把“外层循环体里内层循环结构”执行一遍