3.7 循环语句

必备知识：前面课程的学习

循环语句

循环语句是一系列反复执行直到符合特定条件的命令。JavaScript 支持for，do while，while这些循环语句，还有 Label（label 本身不是一个循环语句，但是经常和这些语句一起使用）。另外，你可以在循环语句中使用break和continue语句。

需要注意的是，还有另一种比较高级的循环语句：for each...in，但它是用来操作对象的。

综上，循环语句有以下几种：

• for Statement
• do...while Statement
• while Statement
• label Statement
• break Statement
• continue Statement

我们一个一个来看。

for 语句

for 循环反复直到一个特定的条件计算为假。JavaScript 中的循环和 Java 以及 C 中的循环相似。for 语句如下所示：

for ([initialExpression]; [condition]; [incrementExpression]) {
   statement
}

在一个for 执行的过程中，会发生以下事情：

1. [initialExpression]：初始化表达式，若存在则执行。此表达式通常初始化了一个或多个循环用计数器，语法上也允许设定一个任意复杂度的表达式。表达式里还可以声明变量。
2. [condition]：条件表达式。如果表达式的值为 true，将执行循环语句；若为 false，循环终止。若要完全忽略此条件表达式，则设此表达式的值为 true。
3. statement：需执行的语句。如果要执行多条语句，就要用中括号（{...}）把语句括起来。
4. [incrementExpression]：累计表达式。若存在则执行，然后会回到第2步执行语句。

例如下面的这个函数包含了一个 for 语句，用来计算一个选择列表（一个可以多选的选择列表）中被选择项目的数量。这个 for 语句定义了一个初始化值为 0 的变量 i，它检查 i 小于选择列表的项目数量，然后执行了 for 循环里面的 if 语句，每次循环后 i 则自动加 1。

<script type="text/javascript">

function howMany(selectObject) {
   var numberSelected = 0;
   for (var i = 0; i < selectObject.options.length; i++) {
      if (selectObject.options[i].selected)
         numberSelected++;
   }
   return numberSelected;
}

</script>
<form name="selectForm">
   <p>
      <strong>Choose some music types, then click the button below:</strong>
      <br/>
      <select name="musicTypes" multiple="multiple">
         <option selected="selected">R&B</option>
         <option>Jazz</option>
         <option>Blues</option>
         <option>New Age</option>
         <option>Classical</option>
         <option>Opera</option>
      </select>
   </p>
   <p>
      <input type="button" value="How many are selected?"
         onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/>
   </p>
</form>

do...while 语句

do...while 语句反复直到一个特定条件计算为假。do...while 语句如下所示：

do
   statement
while (condition);

语句（statement）会在条件判断前执行一次。如果要执行多条语句，就要用中括号（{...}）把语句括起来。如果条件表达式（condition）为 true，语句将再次执行。在每次语句执行完毕时，会执行条件判断。如果条件表达式（condition）为 false，执行停止并跳到 do...while 后继续执行下面的语句。

在下面的例子中，do 循环至少迭代一次，然后重复执行直到 i 不再小于 5。

do {
   i += 1;
   console.log(i);
} while (i < 5);

while 语句

while 语句只要一个特定条件计算为真就执行语句。如下所示：

while (condition)
   statement

如果条件表达式（condition）为 false，在循环体内的语句停止执行，然后跳到循环体后的语句继续执行。

条件（condition）在循环体内的语句执行之前进行判断。如果条件表达式（condition）为 false，语句（statement）将会试行并且条件会再次进行判断。如果条件表达式（condition）为 false，执行停止，然后跳到 while 循环体后的语句执行。

如果要执行多条语句，就要用中括号（{...}）把语句括起来。

例如，下面的 while 循环只在 n 小于 3 的时候反复执行：

n = 0;
x = 0;
while (n < 3) {
   n++;
   x += n;
}

在每次迭代中，循环计数器 n 会增加 1 并会与 x 相加。因此，x 与 n 在每次迭代中的值为：

1. 第一次执行后：n=1，x=1；
2. 第二次执行后：n=2，x=3；
3. 第三次执行后：n=3，x=6。

在第三次执行完成后，条件判断 n<3 不再为 true，循环终止。

注：构造循环语句时，应当避免死循环。 例如，下面的语句将一直循环，因为它的条件永远不会变为 false。

while (true) alert("Hello, world");

对象操作语句

JavaScript 用 for...in, for each...in 和 with 语句来操作对象。

for...in 语句

for...in 语句迭代一个指定的变量去遍历这个对象的属性，每个属性，javascript 执行指定的语句。一个for...in 语句示例如下：

for (variable in object) {
   statements
}

for each...in 语句

它和 for...in 相似，但是让对象属性的值递回取得，而不是作用于它们的名字。

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
  sum += item;
}
print(sum); // prints "26", which is 5+13+8

本节任务

• 学习慕课网提供的 《JavaScript进阶篇》中 4-1 至 4-4 的内容，并完成练习。