JavaScript 流程控制语句


流程控制语句指定计算执行的顺序。


流程控制语句分类

JavaScript语言提供了3种类型的流程控制语句。

  • 条件判断语句,包含if、switch语句。
  • 循环语句,包含for、while、do-while语句。
  • 分支语句,包含break、continue、label语句。

if语句

if-else语句根据不同的条件执行不同的语句块。

if-else的格式如下:

if(表达式1) {
  语句块1
} else if (表达式2) {
  语句块2
}
...
else {
  语句块3
}

其中else ifelse部分都是可选的。else if可以有多个。

if语句执行过程:

计算表达式1的值,如果为true,则执行语句块1,终止if语句。否则,计算表达式2的值,如果为true,则执行语句块2,终止if语句。如果表达式1表达式2的值都为false,则执行语句块3,终止if语句。

下面是if语句的例子。

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var color = "red";
  if (color == "blue")
    document.writeln("blue");
  else if (color == "red")
    document.writeln("red");  // red
  else
    document.writeln("unkown color");
</script>
</pre></body></html>

if语句只会执行多个语句块中的其中一个语句块,即只执行第一个值为true的表达式后面的语句块,如果所有表达式都为false,则执行语句块3

switch语句

switch语句判断指定表达式是否匹配多个数字或字符串表达式中的一个,并执行对应的分支。

switch语句的形式:

switch(表达式1) {
  case 表达式2 : 语句2; break;
  case 表达式3 : 语句3; break;
  ...;
  default : 语句4; break;
}

break语句是可选的。

switch语句的执行过程:

  1. 计算表达式1的值(表达式1的值可以为number和string类型)。
  2. 比较表达式1的值和表达式2的值(使用===运算符比较),如果相等,则执行表达式2后面的语句,直到碰到break语句,终止switch语句。否则,比较表达式1的值和表达式3的值,如果相等,则执行表达式3后面的语句,直到碰到break语句,终止switch语句。
  3. 如果表达式1的值和所有case的表达式的值都不相等,则执行default后面的语句。

下面是switch语句的例子。

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
var color = "red";
switch (color) {
  case "blue":
    document.writeln("blue");
    break;
  case "red":
    document.writeln("red");  // red
    break;
  default:
    document.writeln("unkown color");
}
</script>
</pre></body></html>

switch语句可能会执行case中的多个语句块,直到碰到break语句或已经到了switch语句的结束位置。

while和do-while语句

while语句形式:

while(表达式1) {
  语句1
}

do-while语句形式:

do {
  语句2
} while(表达式2);

while语句的执行过程:

  1. 计算表达式1的值,如果结果值为true,则执行语句1;否则,while循环终止。
  2. 重复步骤1。

do-while语句的执行过程:

  1. 执行语句2
  2. 计算表达式2的值,如果结果值为true,则执行语句2;否则,do-while循环终止。
  3. 重复步骤2。

下面是while语句和do-while语句的例子。

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var i = 3;
  var j = 3;

  while(i-- > 0)
      document.writeln("i = " + i);

  document.writeln("");
  do {
      document.writeln("j = " + j);
  } while (j-- > 0);
</script>
</pre></body></html>

for语句

for语句有两种形式:

for(初始化语句; 表达式1; 语句1) {
  语句2
}

for(variable in object) {
  语句3
}

第一种形式for语句中初始化语句表达式1语句1都是可选的。

第一种形式for语句执行过程:

  1. 如果有初始化语句,则执行初始化语句
  2. 如果没有表达式1,则认为表达式1的值为true。否则计算表达式1的值,如果结果为false,for循环终止。否则,执行语句2
  3. 如果有语句1,执行语句1(语句1常用于增加或减少一个变量的值)。
  4. 流程回到步骤2。

第二种形式for语句执行过程:

  1. 如果object中还有未处理的属性,从object中取出一个属性做为变量variable的值,执行语句3。如果object中没有未处理的属性,for循环终止。
  2. 重复步骤1。

for...in形式的for循环从object中取出属性的顺序不是固定的。不要使用for...in循环来处理数组,因为数组的属性除了数组的索引外,还包括自定义的数组属性。

下面是for语句的例子。

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var a = [1, 2, 3];
  var pet = {name: "dog", food: "bone"};
  for (var i = 0; i < a.length; i++)
    document.writeln("a[" + i + "] = " + a[i]);

  for (var prop in pet)
    document.writeln("pet." + prop + " = " + pet[prop]);
</script>
</pre></body></html>

break语句

break语句用于提前终止for、while循环和switch语句。

break语句有两种形式:break;break 标识符;。第一种形式break语句终止当前所在的循环,第二种形式break语句终止标识符指定的循环(一般是更外层的循环)。

下面是break语句的例子。

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var a = [[1, 2, 3], [3, 6, 9], [4, 8, 12]];
  var str = "";
  get3:
  for (var i = 0; i < a.length; i++)
    for (var j = 0; j < a[i].length; j++) {
        str += "a[" + i + "][" + j + "] = " + a[i][j] + "\n";
        if (a[i][j] == 3) {
            str += "a[" + i + "] contains 3 " + "\n";
            break get3;
        }
    }
  document.writeln(str);
</script>
</pre></body></html>

continue语句

continue语句跳过当前这次循环,进入到下次循环。

continue语句有两种形式:continue;continue 标识符;。第一种形式continue语句跳过里层的当次循环。 第二种形式continue语句跳过标识符指定的循环(一般是更外层的循环)的当次循环。

下面是continue语句的例子。

<!DOCTYPE html><html><body><pre>
<script type="text/javascript">
  var a = [[1, 2, 3], [3, 6, 9], [4, 8, 12]];
  var str = "";
  get3:
  for (var i = 0; i < a.length; i++)
    for (var j = 0; j < a[i].length; j++) {
        str += "a[" + i + "][" + j + "] = " + a[i][j] + "\n";
        if (a[i][j] == 3) {
            str += "a[" + i + "] contains 3 " + "\n";
            continue get3;
        }
    }
  document.writeln(str);
</script>
</pre></body></html>