Before Coding [16] - JavaScript - 循环语句

3.7 循环语句

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

循环语句

循环语句是一系列反复执行直到符合特定条件的命令。JavaScript 支持fordo whilewhile这些循环语句,还有 Label(label 本身不是一个循环语句,但是经常和这些语句一起使用)。另外,你可以在循环语句中使用breakcontinue语句。

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

综上,循环语句有以下几种:

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

我们一个一个来看。

for 语句

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

1
2
3
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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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 语句如下所示:

1
2
3
do
statement
while (condition);

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

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

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

while 语句

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

1
2
while (condition)
statement

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

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

如果要执行多条语句,就要用中括号({…})把语句括起来。

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

1
2
3
4
5
6
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:

1
2
> while (true) alert("Hello, world");
>

对象操作语句

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

for…in 语句

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

1
2
3
for (variable in object) {
statements
}

for each…in 语句

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

1
2
3
4
5
6
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

本节任务

最近访客