JavaScript While 循环

循环语句就是能够重复执行相同操作的语句，循环语句由两种基本语法形式：for 语句和 while 语句。

While 语句只要条件为 true，循环能够一直执行代码块。

While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

while (条件) {
    要执行的代码块
}

在下面的例子中，循环中的代码将运行，一遍又一遍，只要变量（i）小于 10：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript while</h2>
<p id="demo">
<script>
var text = "";
var i = 0;
while (i < 10) {
  text += "<br>数字是 " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

运行一下

注意：如果您忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

Do/While 循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

do {
    要执行的代码块
}
while (条件);

下面的例子使用了 do/while 循环。该循环会执行至少一次，即使条件为 false，因为代码块会在条件测试之前执行：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript do ... while</h2>
<p id="demo">
<script>
var text = ""
var i = 0;
do {
  text += "<br>数字是 " + i;
  i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

运行一下

注意：不要忘记对条件中所用变量进行递增，否则循环永不会结束！

比较 For 与 While

如果您已经阅读了之前关于 for 循环的教程，您会发现 while 循环与 for 循环相当类似，其中的语句 1 和语句 2 都可以省略。

下面例子中的循环使用 for 循环来提取 cars 数组中的汽车品牌：

<!DOCTYPE html>
<html>
<body>
<p id="demo">
<script>
var cars = ["宝马", "奔驰", "保时捷", "沃尔沃"];
var i = 0;
var text = "";
for (;cars[i];) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

运行一下

下面例子中的循环使用 while 循环来提取 cars 数组中的汽车品牌：

<!DOCTYPE html>
<html>
<body>
<p id="demo">
<script>
var cars = ["宝马", "奔驰", "保时捷", "沃尔沃"];
var i = 0;
var text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

运行一下

JavaScript While 循环

While 循环

Do/While 循环

比较 For 与 While

分类导航