3.2 循环语句
视频讲解
在日常生活中，有时需要反复地执行某些操作。例如，运动员要完成10000米的比赛，需要在跑道上跑25圈，这就是循环的一个过程。类似这样反复执行同一操作的情况，在程序设计中经常会遇到，为了满足这样的开发需求，JavaScript提供了循环语句。所谓循环语句就是在满足条件的情况下反复地执行某一个操作。循环语句主要包括while语句、do…while语句和for语句，下面分别进行讲解。
3.2.1 while语句
while循环语句也称为前测试循环语句，它是利用一个条件来控制是否要继续重复执行这个语句。while循环语句的语法格式如下：
while(表达式){
语句
}
参数说明。
表达式：一个包含比较运算符的条件表达式，用来指定循环条件。
语句：用来指定循环体，在循环条件的结果为true时，重复执行。
说明
while循环语句之所以命名为前测试循环，是因为它要先判断此循环的条件是否成立，然后才进行重复执行的操作。也就是说，while循环语句执行的过程是先判断条件表达式，如果条件表达式的值为true，则执行循环体，并且在循环体执行完毕后，进入下一次循环，否则退出循环。
while循环语句的执行流程如图3.11所示。
图3.11 while循环语句的执行流程
例如，应用while语句输出1~10这10个数字的代码如下：
01 var i = 1; //声明变量
02 while(i<=10){ //定义while语句
03 document.write(i+"\n"); //输出变量i的值
04 i++; //变量i自加1
05 }
运行结果为：
1 2 3 4 5 6 7 8 9 10
注意
在使用while语句时，一定要保证循环可以正常结束，即必须保证条件表达式的值存在为false的情况，否则将形成死循环。
【例3.06】运动员参加5000米比赛，已知标准的体育场跑道一圈是400米，应用while语句计算出在标准的体育场跑道上完成比赛需要跑完整的多少圈。代码如下：（实例位置：资源包\源码\03\3.06）
01 <script type="text/javascript">
02 var distance=400; //定义表示距离的变量
03 var count=0; //定义表示圈数的变量
04 while(distance<=5000){
05 count++; //圈数加1
06 distance=(count+1)*400; //每跑一圈就重新计算距离
07 }
08 document.write("5000米比赛需要跑完整的"+count+"圈"); //输出最后的圈数
09 </script>
运行本实例，结果如图3.12所示。
图3.12 输出5000米比赛的完整圈数
3.2.2 do…while语句
do…while循环语句也称为后测试循环语句，它也是利用一个条件来控制是否要继续重复执行这个语句。与while循环所不同的是，它先执行一次循环语句，然后再去判断是否继续执行。do…while循环语句的语法格式如下：
do{
语句
} while(表达式);
参数说明。
语句：用来指定循环体，循环开始时首先被执行一次，然后在循环条件的结果为true时，重复执行。
表达式：一个包含比较运算符的条件表达式，用来指定循环条件。
说明
do…while循环语句执行的过程是：先执行一次循环体，然后再判断条件表达式，如果条件表达式的值为true，则继续执行，否则退出循环。也就是说，do…while循环语句中的循环体至少被执行一次。
do…while循环语句的执行流程如图3.13所示。
图3.13 do…while循环语句的执行流程
do…while循环语句同while循环语句类似，也常用于循环执行的次数不确定的情况。
注意
do…while语句结尾处的while语句括号后面有一个分号“;”，为了养成良好的编程习惯，建议读者在书写的过程中不要将其遗漏。
例如，应用do…while语句输出1~10这10个数字的代码如下：
01 var i = 1; //声明变量
02 do{ //定义do...while语句
03 document.write(i+"\n"); //输出变量i的值
04 i++; //变量i自加1
05 }while(i<=10);
运行结果为：
1 2 3 4 5 6 7 8 9 10
do…while语句和while语句的执行流程很相似。由于do…while语句在对条件表达式进行判断之前就执行一次循环体，因此do…while语句中的循环体至少被执行一次，下面的代码说明了这两种语句的区别。
01 var i = 1; //声明变量
02 while(i>1){ //定义while语句，指定循环条件
03 document.write("i的值是"+i); //输出i的值
04 i--; //变量i自减1
05 }
06 var j = 1; //声明变量
07 do{ //定义do...while语句
08 document.write("j的值是"+j); //输出变量j的值
09 j--; //变量j自减1
10 }while(j>1);
运行结果为：
j的值是1
【例3.07】使用do…while语句计算1+2+…+100的和，并在页面中输出计算后的结果。代码如下：（实例位置：资源包\源码\03\3.07）
01 <script type="text/javascript">
02 var i = 1; //声明变量并对变量初始化
03 var sum = 0; //声明变量并对变量初始化
04 do{
05 sum+=i; //对变量i的值进行累加
06 i++; //变量i自加1
07 }while(i<=100); //指定循环条件
08 document.write("1+2+…+100="+sum); //输出计算结果
09 </script>
运行本实例，结果如图3.14所示。
图3.14 计算1+2+…+100的和
3.2.3 for语句
for循环语句也称为计次循环语句，一般用于循环次数已知的情况，在JavaScript中应用比较广泛。for循环语句的语法格式如下：
for(初始化表达式;条件表达式;迭代表达式){
语句
}
参数说明。
初始化表达式：初始化语句，用来对循环变量进行初始化赋值。
条件表达式：循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量超过了该边限，则停止该循环语句的执行。
迭代表达式：用来改变循环变量的值，从而控制循环的次数，通常是对循环变量进行增大或减小的操作。
语句：用来指定循环体，在循环条件的结果为true时，重复执行。
说明
for循环语句执行的过程是，先执行初始化语句，然后判断循环条件，如果循环条件的结果为true，则执行一次循环体，否则直接退出循环，最后执行迭代语句，改变循环变量的值，至此完成一次循环；接下来将进行下一次循环，直到循环条件的结果为false，才结束循环。
for循环语句的执行流程如图3.15所示。
图3.15 for循环语句的执行流程
例如，应用for语句输出1~10这10个数字的代码如下：
01 for(var i=1;i<=10;i++){ //定义for循环语句
02 document.write(i+"\n"); //输出变量i的值
03 }
运行结果为：
1 2 3 4 5 6 7 8 9 10
在for循环语句的初始化表达式中可以定义多个变量。例如，在for语句中定义多个循环变量的代码如下：
01 for(var i=1,j=6;i<=6,j>=1;i++,j--){
02 document.write(i+"\n"+j); //输出变量i和j的值
03 document.write("<br>"); //输出换行标记
04 }
运行结果为：
1 6
2 5
3 4
4 3
5 2
6 1
注意
在使用for语句时，也一定要保证循环可以正常结束，也就是必须保证循环条件的结果存在为false的情况，否则循环体将无休止地执行下去，从而形成死循环。例如，下面的循环语句就会造成死循环，原因是i永远大于等于1。
01 for(i=1;i>=1;i++){ //定义for循环语句
02 alert(i); //输出变量i的值
03 }
为使读者更好地了解for语句的使用，下面通过一个实例来介绍for语句的使用方法。
【例3.08】应用for循环语句计算100以内所有奇数的和，并在页面中输出计算后的结果。代码如下：（实例位置：光盘\源码\03\3.08）
01 <script type="text/javascript">
02 var i,sum; //声明变量
03 sum = 0; //对变量初始化
04 for(i=1;i<100;i+=2){
05 sum=sum+i; //计算100以内各奇数之和
06 }
07 alert("100以内所有奇数的和为："+sum); //输出计算结果
08 </script>
运行程序，在对话框中会显示计算结果，如图3.16所示。
图3.16 输出100以内所有奇数的和
3.2.4 循环语句的嵌套
在一个循环语句的循环体中也可以包含其他的循环语句，这称为循环语句的嵌套。上述3种循环语句（while循环语句、do…while循环语句和for循环语句）都是可以互相嵌套的。
如果循环语句A的循环体中包含循环语句B，而循环语句B中不包含其他循环语句，那么就把循环语句A叫作外层循环，而把循环语句B叫作内层循环。
例如，在while循环语句中包含for循环语句的代码如下：
01 var i,j; //声明变量
02 i = 1; //对变量赋初值
03 while(i<4){ //定义外层循环
04 document.write("第"+i+"次循环："); //输出循环变量i的值
05 for(j=1;j<=10;j++){ //定义内层循环
06 document.write(j+"\n"); //输出循环变量j的值
07 }
08 document.write("<br>"); //输出换行标记
09 i++; //对变量i自加1
10 }
运行结果为：
第1次循环：1 2 3 4 5 6 7 8 9 10
第2次循环：1 2 3 4 5 6 7 8 9 10
第3次循环：1 2 3 4 5 6 7 8 9 10
【例3.09】用嵌套的for循环语句输出乘法口诀表。代码如下：（实例位置：资源包\源码\03\3.09）
01 <script type="text/javascript">
02 var i,j; //声明变量
03 document.write("<pre>"); //输出<pre>标记
04 for(i=1;i<10;i++){ //定义外层循环
05 for(j=1;j<=i;j++){ //定义内层循环
06 if(j>1) document.write("\t"); //如果j大于1就输出一个Tab空格
07 document.write(j+"x"+i+"="+j*i); //输出乘法算式
08 }
09 document.write("<br>"); //输出换行标记
10 }
11 document.write("</pre>"); //输出</pre>标记
12 </script>
运行本实例，结果如图3.17所示。
图3.17 输出乘法口诀表