五、流程控制--循环
目录
1.for循环
1.1 语法结构
for(初始化变量;条件表达式;操作表达式){
循环体;
}
- 初始化变量:通常被用于初始化一个计数器,该表达式可以使用var关键字声明新的变量,这个变量帮我们来记录次数。
- 条件表达式:用于确定每一次循环是否能被执行。如果结果是true就继续循环,否则退出循环。
- 操作表达式:每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然,递减变量也是可以的。
1.2 执行过程
- 初始化变量,初始化操作在整个for循环只会执行一次。
- 执行条件表达式,如果结果为true,则执行循环体语句,否则退出循环,循环结束。
- 执行操作表达式,此时第一轮结束。
- 第二轮开始,直接去执行条件表达式(不再初始化变量),如果为true,则执行循环体语句,否则退出循环。
- 继续执行操作表达式,第二轮结束。
- 后续跟第二轮一致,直至条件表达式为假,结束整个for循环。
1.2.1 断点调试debugger
- 断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后可以一步步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错语,停下。
- 断点调试可以帮我们观察程序的运行过程。
- 打开浏览器按F12---->source--->找到需要调试的文件--->单击,并在程序的某一行设置断点(刷新)Watch监视,通过watch可以监视变量的值的变化,非常的实用。F11程序一步一步执行。
1.2.2 for循环案例
案例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+=i; //sum=sum+i;
}
console.log(sum);
案例3 求0-10之间奇数的和
var sum=0;
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+'个球');
}
1.3 双重或多重for循环
1.3.1 执行过程
for(外循环的初始值;外循环的条件;外循环的操作表达式){
for(内循环的初始值;内循环的条件;内循环的操作表达式){
执行的代码块;
}
}
外层循环每执行一次,都会让内层循环执行完成一遍
例:打印直角三角形
*
***
*****
*******
*********
//外层循环控制行数 for(var i=1;i<=5;i++){ //内层循环控制*的个数 for(var j=1;j<=2*i-1;j++){ document.write('*'); } doucument.write('<br>'); }
1.4 for省略的情况
- {}中只有一句代码,可以省略{}
- ( ; ; ;)三个条件全部都可以省略
- 条件1省略
var i=0; for(;i<5;i++){ console.log(i); }
- 条件2省略
var i=0; for(; ;i++){ console.log(i); if(i==5){ break;//结束循环 } console.log(i); }
- 条件3省略
var i=0; for( ; ; ){ i++; if(i==5){ break; //结束循环 } console.log(i); }
- 条件1省略
2. while 循环
2.1 while 循环语法结构
while(条件表达式){
//循环体代码
}
2.2 执行过程
- 当循环条件为true时,则执行循环体,当循环条件为false时,结束整个循环
- 注意:需要在循环体中设置出口,即循环结束的条件;否则循环条件永远为true,会出现死循环
2.3 do-while循环
do{
//循环体代码
}while(条件表达式)
2.3.1 执行过程
2.3.2 for、while和do-while的区别
for | 适用于循环次数明确 | |
while | 适用于循环次数不明确 | 当条件不成立时,while循环不会执行一次代码块 适用于不需要至少执行一次的情况 |
do-while | 当条件不成立时,do-while循环会执行一次代码块 适用于需要至少执行一次的情况 |
3. break和continue的区别
特点 | 共性 | 举例 | |
break 中断 | 1.switch...case语句中,结束条件语句 2.循环中,结束当前的循环,break后面的代码不再执行 3.结束labelName这个名字的整个循环:break labelName | break和continue之后的语句不会再执行了 | 举例:for(var i=0;i<5;i++){ for(var j=0;j<3;j++){ if(j==1){ break; } console.log(i,j);//i=0、1、2、3、4,j=0 } } console.log(i,j);//5 1 |
continue 继续 | 循环中,结束这一次的循环,继续下次循环(循环迭代还在执行) | 举例:for(var i=0;i<5;i++){ for(var j=0;j<3;j++){ if(j==1){ continue; } console.log(i,j);//i=0、1、2、3、4,j=0、2 } } console.log(i,j);//5 3 |