小码哥的IT人生

JavaScript While 循环

JavaScript基础 2022-04-25 01:33:56小码哥的IT人生shichen

JavaScript While 循环

只要条件为 true,循环能够一直执行代码块。

While 循环

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

语法

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

示例代码:

在下面的例子中,循环中的代码将运行,一遍又一遍,只要变量(i)小于 10:

while (i < 10) {
    text += "数字是 " + i;
    i++;
}

完整实例:

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

运行结果:

Javascript while

数字是 0
数字是 1
数字是 2
数字是 3
数字是 4
数字是 5
数字是 6
数字是 7
数字是 8
数字是 9

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

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

Do/While 循环

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

语法

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

示例代码:

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

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

完整实例:

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

运行结果:

Javascript do ... while

数字是 0
数字是 1
数字是 2
数字是 3
数字是 4
数字是 5
数字是 6
数字是 7
数字是 8
数字是 9

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

不要忘记对条件中所用变量进行递增,否则循环永不会结束!

比较 For 与 While

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

本例中的循环使用 for 循环来提取 cars 数组中的汽车品牌:

示例代码:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
    text += cars[i] + "<br>";
    i++;
} 

完整实例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "porsche", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

运行结果:

BMW
Volvo
porsche
Ford

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

本例中的循环使用 while 循环来提取 cars 数组中的汽车品牌:

示例代码:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
    text += cars[i] + "<br>";
    i++;
} 

完整实例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "porsche", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

运行结果:

BMW
Volvo
porsche
Ford

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

课外书

如需更多有关 JavaScript while 语句的知识,请阅读 JavaScript 高级教程中的相关内容:

ECMAScript 迭代语句
迭代语句又叫循环语句。本节为您介绍 ECMAScript 提供的四种迭代语句。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024