循环结构

本节学习目标

掌握JavaScript中实现循环的几种方法

本节内容

在前面的内容中我们学习了if else和switch，分支结构使JavaScript具有了判断的能力，但其实电脑的判断能力和人比起来差远了，电脑更擅长一件事情不停地重复，也就是循环。在程序设计中，循环是反复执行同一个代码块的方式，可以减少源程序重复书写的工作量。在程序设计中，循环结构非常有用，也是最能发挥计算机特长的程序结构。例如：我们想要对一个数组中的每一项都执行相同的操作，就可以使用循环结构。

循环结构的三个要素：循环变量、循环体和循环终止条件。循环变量是在该循环结构中指示当前在哪次循环的一个变量；循环体是在循环结构中被重复执行的程序；循环终止条件通常是一个条件判断语句，用来判断是否终止当前的循环结构，否则将会陷入无限的死循环中。当条件成立的时候，执行循环体的代码，当条件不成立的时候，跳出循环，执行循环结构后面的代码。

在JavaScript中，通常通过以下三种方法实现循环结构：

For 循环
for语句的流程图如下所示：

在该循环结构中，当条件成立时，执行语句1，否则跳出循环体。 for语句的基本语法如下：

for (循环变量初始化;循环终止条件;增量){
  循环体;
}

接下来我们来看一个简单的例子：有十个学员报数，“学员1号、学员2号……”。有了for循环，我们只用很少的代码就可以实现十个学员的报数。

for(var i = 1; i<=10; i++){
    console.log('学员' + i + '号。');
}

输出的结果如下所示：

学员1号。
学员2号。
学员3号。
学员4号。
学员5号。
学员6号。
学员7号。
学员8号。
学员9号。
学员10号。

在这个例子中，循环恰好执行了10次，那么for(i=1; i<=10; i++)一句中的10是不是10次的意思呢？下面我们就来看看for循环的工作机制。首先i=1叫做初始条件，也就是说从哪里开始，特别的，我们的例子是从i=1开始的。出现在第一个分号后面的i<=10表示循环终止条件，每次循环都会先判断这个条件是否满足，如果满足则继续循环，否则停止循环，继续执行for循环后面的代码。你可能想问了，我们设定了i=0，岂不是永远都小于等于10吗？来看第三个部分。最后的i++表示让i在自身的基础上加1，这是每次循环后的动作。也就是说，每次循环结束时，i都会比原来大1，执行若干次循环之后，i<=10的条件就不满足了，这时循环结束。for循环后面的代码将得到执行。

While 循环
while循环重复执行一段代码，直到某个条件不再满足。
while语句的流程图如下所示：

while语句属于前测试循环语句，也就是说，在循环体内的代码被执行之前，就会对出口的条件求值。因此，循环体内的代码有可能永远不会被执行。以下是while语句的语法：

while(循环终止条件){
  循环体
}

和for循环类似，当循环条件成立时，执行花括号{}内的语句，否则跳出循环。下面用while循环实现上面相同的例子：

var i = 1; 
while(i<=10){
  console.log('学员' + i + '号。');
  i = i + 1;
}

这两个例子实现的结果是完全相同的，只是实现的方式不同。看起来while循环好像比for循环少了点东西，只有一个判断条件。但其实while循环也是有初始条件的，只不过在之前就已经定义好了，例如上面例子中的var i = 1;，至于变量i的增大，则是放到了循环体里面，其实这个过程和for循环没有什么区别，也是变量i不断变大，直到判断条件不满足，则循环结束。

do-while循环 do-while循环语句是一种后测试循环语句，即只有在循环体中的代码执行之后，才会测试出口条件。换句话说，在对条件表达式求值之前，循环体内的代码至少被执行一次。以下是do-while语句的语法：
```
do{
循环体
}while(循环终止条件)
```
下面同样实现上面的那个例子：
```
var i = 1;
do{
console.log('学员' + i + '号。');
i = i + 1;
} while(i<=10)
```
这个例子的输出结果和上面的结果也是完全相同的。可以看到do-while和while也是很类似的，在循环外面初始化，循环体内改变循环变量，不同的只是先判断循环终止条件还是后判断循环终止条件。
像do-while这种后测试循环语句最常用于循环体中的代码至少要被执行一次的情形。

其他资料推荐

本节练习

阅读上面提到的文章，并对for,while,do-while三种循环结构进行总结。
用任何一种方式写一个循环，实现以下需求：从0循环到20，分别判断该数是奇数还是偶数，并输出。输出结果如下：
```
1是奇数。
2是偶数。
3是奇数。
……
19是奇数。
20是偶数。
```

写程序输出9*9乘法表。输出结果如下：

1*1=1
2*1=2 2*2=4
3*1=3 3*2=6 3*3=9
……
9*1=9 9*2=18 9*3=27 …… 9*9=81

Previous条件分支结构 Next字符串

Last updated 6 years ago