JavaScript while 语句
JavaScript while 语句
实例
只要变量 (i) 小于 5，就会循环代码块：
var text = "";
var i = 0;
while (i < 5) {
text += "<br>The number is " + i;
i++;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>只要 i 小于 5，点击按钮就可以循环遍历一段代码。</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var text = "";
var i = 0;
while (i < 5) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
while 语句创建循环，该循环在指定条件为真时执行。
只要条件为真，循环就会继续运行。只有当条件变为假时它才会停止。
JavaScript 支持不同类型的循环：
- for - 多次循环代码块
- for/in - 遍历对象的属性
- for/of - 循环遍历可迭代对象的值
- while - 在指定条件为真时循环代码块
- do/while - 循环一次代码块，然后在指定条件为真时重复循环
提示：请使用 break 语句跳出循环，使用 continue 语句跳过循环中的某个值。
浏览器支持
| 语句 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| while | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
while (condition) {
code block to be executed
}
参数值
| 参数 | 描述 |
|---|---|
| condition |
必需。定义运行循环（代码块）的条件。如果返回 true，循环将重新开始，如果返回 false，循环将结束。 注释：如果条件始终为真，循环将永远不会结束。这将使您的浏览器崩溃。 注释：如果您使用带有条件的变量，请在循环之前对其初始化，并在循环内将其递增。如果忘记增加变量，循环将永远不会结束。这也会使您的浏览器崩溃。 |
技术细节
| JavaScript 版本： | ECMAScript 1 |
|---|
更多实例
示例代码：
循环遍历数组的索引，从 cars 数组中收集汽车名称：
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i = 0;
while (i < cars.length) {
text += cars[i] + "<br>";
i++;
}
例子解释：
- 首先，我们在循环开始之前设置一个变量 (var i = 0;)
- 然后，我们定义循环运行的条件。只要变量小于数组的长度（即 4），循环就会继续
- 每次循环执行时，变量加一 (i++)
- 一旦变量不再小于 4（数组的长度），条件为假，循环结束
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击这个按钮可按升序循环遍历数组的索引。</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i = 0;
while (i < cars.length) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
向后循环数组索引：
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var len = cars.length;
while (len--) {
text += cars[len] + "<br>";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击这个按钮可按降序循环遍历数组的索引。</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var len = cars.length;
while (len--) {
text += cars[len] + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
使用 break 语句 - 循环代码块，但当变量 i 等于 "3" 时退出循环：
var text = "";
var i = 0;
while (i < 5) {
text += "<br>The number is " + i;
i++;
if (i == 3) {
break;
}
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击该按钮可进行带 break 的循环。循环应该输出数字 0 到 4，但是当变量 i 等于“3”时，break 语句退出循环。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var text = "";
var i = 0;
while (i < 5) {
text += "<br>The number is " + i;
i++;
if (i === 3) {
break;
}
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
使用 continue 语句 - 循环代码块，但跳过 "3" 这个值：
var text = "";
var i = 0;
while (i < 5) {
i++;
if (i == 3) {
continue;
}
text += "<br>The number is " + i;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮执行循环，将跳过 i 等于 3 的 step。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var text = "";
var i = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
text += "<br>The number is " + i;
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
相关页面
JavaScript 教程：JavaScript While 循环
JavaScript 参考手册：JavaScript do ... while 语句
JavaScript 参考手册：JavaScript for 语句
JavaScript 参考手册：JavaScript break 语句
JavaScript 参考手册：JavaScript continue 语句
