JavaScript 的 while 语句创建了一个循环，只要指定的条件为真，就会重复执行一段代码块。条件是在执行代码块之前进行评估的。
在编写程序时，您可能会遇到需要反复执行某个动作的情况。在这种情况下，您需要编写循环语句以减少代码行数。
JavaScript 支持所有必要的循环来减轻编程的压力。本章我们将讨论 while 循环。
JavaScript 中有两种类型的 while 循环，如下所示：
-
入口控制循环 —— 循环首先检查循环条件是否有效，然后进入循环体执行循环语句。
-
出口控制循环 —— 循环进入循环体并执行循环语句而不检查条件。完成迭代后，检查条件。
JavaScript 的 while 循环
JavaScript 中最基本的循环是 while 循环，本章将会讨论这个循环。while 循环是一个入口控制循环。
while 循环的目的是只要一个表达式为真，就重复执行一个语句或代码块。一旦表达式变为假，循环终止。
流程图
while 循环的流程图如下所示：
语法
JavaScript 中 while 循环的语法如下：
while (expression) {
如果表达式为真则执行的语句
}
示例
在下面的示例中，我们定义了变量 count 并初始化为 0。之后，我们使用 while 循环进行迭代直到 count 的值小于 10。
<html>
<body>
<div id='output'></div>
<script type="text/javascript">
let output = document.getElementById("output");
var count = 0;
output.innerHTML = "开始循环 <br>";
while (count < 10) {
output.innerHTML += "当前计数 : " + count + "<br>";
count++;
}
output.innerHTML += "循环停止！";
</script>
<p> 将变量设置为不同的值然后重试... </p>
</body>
</html>
输出：
开始循环
当前计数 : 0
当前计数 : 1
当前计数 : 2
当前计数 : 3
当前计数 : 4
当前计数 : 5
当前计数 : 6
当前计数 : 7
当前计数 : 8
当前计数 : 9
循环停止！
将变量设置为不同的值然后重试...
JavaScript 的 do...while 循环
do...while 循环与 while 循环相似，只是条件检查发生在循环末尾。这意味着即使条件为假，循环也会至少执行一次。
流程图
do-while 循环的流程图如下所示：
语法
JavaScript 中 do-while 循环的语法如下：
do {
要执行的语句；
} while (expression);
注意 do...while 循环末尾使用的分号。
示例
在下面的示例中，我们使用了 do...while 循环，并在输出中打印了结果直到 count 变量的值小于 5。在输出中，我们可以观察到它总是至少执行一次，即使条件为假。
<html>
<body>
<div id="output"></div>
<script type="text/javascript">
let output = document.getElementById("output");
var count = 0;
output.innerHTML += "开始循环" + "<br />";
do {
output.innerHTML += "当前计数 : " + count + "<br />";
count++;
}
while (count < 5);
output.innerHTML += "循环停止！";
</script>
<p>将变量设置为不同的值然后重试...</p>
</body>
</html>
输出：
开始循环
当前计数 : 0
当前计数 : 1
当前计数 : 2
当前计数 : 3
当前计数 : 4
循环停止！
将变量设置为不同的值然后重试...
JavaScript 的 while 与 for 循环
JavaScript 的 while 循环类似于省略了第一和第三个表达式的 for 循环。通常在迭代次数固定且已知的情况下使用 for 循环，而在迭代次数未知时使用 while 循环。
示例
让我们用 for 循环来打印前五个自然数。
<html>
<body>
<p>前五个自然数：</p>
<div id="demo"></div>
<script>
const output = document.getElementById("demo");
for(let i = 1; i <= 5; i++){
output.innerHTML += i + "<br>";
}
</script>
</body>
</html>
它将产生如下输出：
前五个自然数：
1
2
3
4
5
示例
现在我们可以修改上面的 for 循环如下：
<html>
<body>
<p>前五个自然数：</p>
<div id="demo"></div>
<script>
const output = document.getElementById("demo");
let i = 1;
for(; i <= 5; ){
output.innerHTML += i + "<br>";
i++
}
</script>
</body>
</html>
输出：
前五个自然数：
1
2
3
4
5
示例
在上面的例子中，我们在 for 循环语句中省略了第一个和第三个表达式。这类似于 while 循环语句。请看下面的例子：
<html>
<body>
<p>前五个自然数：</p>
<div id="demo"></div>
<script>
const output = document.getElementById("demo");
let i = 1;
while(i <= 5){
output.innerHTML += i + "<br>";
i++
}
</script>
</body>
</html>
输出：
前五个自然数：
1
2
3
4
5
您会注意到，没有第一个表达式（初始化）和第三个表达式（迭代）的 for 循环与 while 循环相似。