4.4 循环语句
选择语句允许让JavaScript选择执行语句块，而循环语句可以让JavaScript重复执行某个语句块。JavaScript中的循环语句包括while语句、do...while语句、for语句和for...in语句4种。
4.4.1 while语句
while语句是在JavaScript中使用得最多的一种循环语句，其语法代码如下所示：
while (<逻辑表达式>) <语句块>
在以上代码中，JavaScript会先判断逻辑表达式的值，如果该值为false，则不执行语句块（在循环语句中语句块又称为循环体）中的语句，即结束整个while语句。如果逻辑表达式的值为true，则执行循环体中的语句，执行完毕之后，再去判断逻辑表达式的值，如果还为true，则再次执行循环体中的语句，这种循环将会一直执行下去，直到逻辑表达式的值为false时才退出循环。
因此，在while语句的循环体中，往往会包含改变逻辑表达式条件的语句，否则逻辑表达式一直为true，会造成死循环。
【实例4.7】有关while语句的使用方法请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>while语句</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 0; 07 while (i<4) 08 { 09 document.write(i + "<br>"); 10 i++; 11 } 12 --> 13 </script> 14 </head> 15 <body> 16 </body> 17 </html>
【代码说明】本例的执行过程如下所示：
（1）执行代码第6行的“var i = 0;”语句。
（2）执行代码第7行的while语句，判断“i<4”是否返回true，如果返回true，执行第（3）步骤，否则终止while语句。
（3）第9行输出变量i的值。
（4）第10行变量i自加1。
（5）重复第（2）步骤。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample07.htm”里的内容，其运行结果如图4.5所示。
图4.5 sample07.htm的运行结果
4.4.2 do...while语句
do...while语句与while语句十分类似，也是一个循环语句，不同的是while语句是先判断逻辑表达式的值是否为true之后再决定是否执行循环体中的语句，而do...while语句是先执行循环体中的语句之后，再判断逻辑表达式是否为true，如果为true则重复执行循环体中的语句。do...while语句的语法代码如下所示：
do <语句块> while (<逻辑表达式>);
【实例4.8】有关do...while语句的使用方法请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>do...while语句</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 0; 07 do 08 { 09 document.write(i + "<br>"); 10 i++; 11 } 12 while (i<4); 13 --> 14 </script> 15 </head> 16 <body> 17 </body> 18 </html>
【代码说明】本例的执行过程如下所示：
（1）执行第6行的“var i = 0;”语句。
（2）执行第7～11行的循环体语句。
（3）判断“i<4”是否返回true，如果返回true，执行第（2）步骤，否则终止do...while语句。
注意
在do...while语句中，while是整个do...while语句中的结束语句，因此，在while语句之后，应该加上分号（虽然省略分号也是可行的）。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample08.htm”里的内容，其运行结果如图4.6所示。
图4.6 sample08.htm的运行结果
【实例4.9】do...while语句与while语句的区别在于，do...while语句是先执行后判断，while语句是先判断后执行，因此，do...while语句有可能比while语句要多执行一次循环体中的语句。请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>do...while语句与while语句的比较</title> 04 <script type="text/javascript"> 05 <!-- 06 var i = 4; 07 do 08 { 09 document.write("i = " + i + "<br>"); 10 i--; 11 } 12 while (i>10); 13 14 var j = 4; 15 while (j>10) 16 { 17 document.write("i = " + j + "<br>"); 18 j--; 19 } 20 --> 21 </script> 22 </head> 23 <body> 24 </body> 25 </html>
【代码说明】在本例中，在while语句与do...while语句的逻辑表达式的返回值都为false，但是do...while语句却执行了一次循环体中的语句，而while语句没有执行。这也是do...while语句与while语句的区别所在。
注意
无论是while语句还是do...while语句，在其循环体中必须要有能改变逻辑表达式结果的语句，否则就有可能会产生死循环。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample09.htm”里的内容，其运行结果如图4.7所示。
图4.7 sample09.htm的运行结果
4.4.3 for语句
for语句也是一种常用的循环语句，这种循环语句使用起来比while语句更为方便，因为for语句提供的是一种常用的循环模式，即初始化变量、判断逻辑表达式和改变变量值，这3个关键操作都可以在for语句中被明确定义。for语句的语法代码如下所示：
for (初始化变量 ; 逻辑表达式 ; 改变变量表达式) <语句块>
从以上代码中可以看出，for语句中包括以下3个表达式。
■初始化变量表达式：该表达式的作用是为循环体所循环的次数设置初始值。相当于sample07.htm中的“var i = 0;”语句，当然，这个初始值不一定要为0，也可以是其他数值。初始值视程序需要而定。
■逻辑表达式：该表达式的作用是判断是否执行循环体，与while语句中的逻辑表达式作用一致。
■改变变量表达式：该表达式的作用是用来改变初始化变量的值，从而控制循环的次数，相当于sample07.htm中的“i++;”语句。
【实例4.10】有关for语句的使用方法请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>for语句</title> 04 <script type="text/javascript"> 05 <!-- 06 for (var i=0;i<4;i++) 07 { 08 document.write(i + "<br>"); 09 } 10 --> 11 </script> 12 </head> 13 <body> 14 </body> 15 </html>
【代码说明】本例的执行过程如下所示：
（1）执行第6行的“var i=0;”初始化变量。
（2）判断“i<4”是否返回true，如果返回true，则执行第（3）步。如果返回false，则结束for语句。
（3）执行第6行的“i++”语句。
（4）执行循环体中的语句。
（5）重复执行第（2）步。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample10.htm”里的内容，其运行结果如图4.8所示。
图4.8 sample10.htm的运行结果
【实例4.11】在for语句中使用第3章中所介绍过的逗号表达式，可以在初始化变量表达式和改变变量表达式中定义多个变量和改变多个变量的值。请看以下代码，注意加粗的文字：
01 <html> 02 <head> 03 <title>for语句</title> 04 <script type="text/javascript"> 05 <!-- 06 for (var i=0,j=10,k=2;i<4;i++,j--) 07 { 08 document.write("i = " + i + "<br>"); 09 document.write("j = " + j + "<br>"); 10 document.write("k = " + k + "<br><br>"); 11 } 12 --> 13 </script> 14 </head> 15 <body> 16 </body> 17 </html>
【代码说明】本例的执行过程如下所示：
（1）执行第6行的“var i=0, j=10, k=2;”初始化了变量i、变量j和变量k。
（2）判断“i<4”是否返回true，如果返回true，则执行第（3）步。如果返回false，则结束for语句。
（3）执行循环体中的代码第8～10行。即输出变量i、变量j和变量k的值。
（4）执行“i++”和“j--”语句。
（5）重复执行第（2）步。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample11.htm”里的内容，其运行结果如图4.9所示。
图4.9 sample11.htm的运行结果
4.4.4 for...in语句
for...in语句提供的是一种与前面提到的循环语句都不同的另一种循环语句，这种循环语句可以遍历对象中的所有属性或数组中的所有元素。也常用来为对象的所有属性赋值。for...in语句的语法代码如下所示：
for (变量 in 对象) <语句块>
【实例4.12】有关for...in语句的用法请看以下代码，注意加粗的文字：
01 <html>
02 <head>
03 <title>for...in语句</title>
04 <script type="text/javascript">
05 <!--
06 var myObject = {a:100,b:200,c:300}
07 for (var i in myObject)
08 {
09 document.write("变量名为："+ i+",变量值为："+myObject[i]
10 + "<br>");
11 }
12 -->
13 </script>
14 </head>
15 <body>
16 </body>
17 </html>
【代码说明】在本例中定义一个名为myObject的对象，该对象有三个属性，分别为a、b、c，这三个属性的值为分别为100、200、300。然后通过for...in语句遍历myObject对象的所有属性，此时，变量i的值，就是对象的属性名称。在循环体内可以使用[ ]运算符来得到对象属性的值。
【运行效果】以上代码为本书配套代码文件目录“代码\第04章\sample12.htm”里的内容，其运行结果如图4.10所示。
图4.10 sample12.htm的运行结果
注意
（1）for...in语句不能指定对象的属性次序，因此，不同的JavaScript版本中实现该语句的结果可能有所不同。
（2）for...in语句可以遍历所有对象的所有可能的属性，但许多内部属性与所有内部方法是不可枚举的。