JavaScript - While 循环

JavaScript 中的 while 语句创建一个循环，只要指定的条件为 true，就会重复执行一段代码块。该条件在执行代码块之前进行评估。

在编写程序时，您可能会遇到需要反复执行某个操作的情况。在这种情况下，您需要编写循环语句来减少代码行数。

JavaScript 支持所有必要的循环，以减轻编程压力。本章我们将讨论 while 循环。

JavaScript 中有两种 while 循环，如下所示。

• 入口控制循环 − 循环首先检查循环条件是否成立，然后进入循环主体执行循环语句。

• 出口控制循环 − 循环进入主体并执行循环语句，不检查条件。迭代完成后，再检查条件。

JavaScript while 循环

JavaScript 中最基本的循环是本章将要讨论的 while 循环。while 循环是一种入口控制循环。

while 循环的目的是只要 表达式 为真，就重复执行语句或代码块。一旦表达式为 false，循环就会终止。

流程图

while 循环 的流程图如下所示 -

语法

while 循环 在 JavaScript 中的语法如下 -

while (表达式) {
    表达式为真时执行的语句
}

示例

在下面的示例中，我们定义了"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="Starting Loop <br>";
        while (count < 10) {
            output.innerHTML+="Current Count : " + count + "<br>";
            count++;
        }
        output.innerHTML+="Loop stopped!";
    </script>
    <p> Set the variable to a different value and then try... </p>
</body>
</html>

输出

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try... 

JavaScript do...while 循环

do...while 循环与 while 循环类似，不同之处在于条件检查在循环结束时进行。这意味着即使条件为 false，循环也总是会执行至少一次。

流程图

do-while 循环的流程图如下 -

语法

do-while 循环在 JavaScript 中的语法如下 -

do {
    要执行的语句;
} while (表达式);

不要忘记 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 += "Starting Loop" + "<br />";
        do {
            output.innerHTML += "Current Count : " + count + "<br />";
            count++;
        }
        while (count < 5);
        output.innerHTML += "Loop stopped!";
    </script>
    <p>Set the variable to a different value and then try...</p>
</body>
</html>

输出

Starting Loop
Current Count : 0 
Current Count : 1 
Current Count : 2 
Current Count : 3 
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript while 循环与 for 循环

JavaScript while 循环类似于 for 循环，但省略了第一个和第三个表达式。for 循环通常用于迭代次数固定且已知的情况下，而 while 循环则用于迭代次数未知的情况下。

示例

我们来举一个使用 for 循环打印前五个自然数的示例 -

<html>
<body>
  <p> First five natural numbers:</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>

它将产生以下输出 -

First five natural numbers:
1
2
3
4
5

示例

我们现在可以修改上面的 for 循环，如下所示 -

<html>
<body>
  <p> First five natural numbers:</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>

Output

First five natural numbers:

1
2
3
4
5

示例

在上面的例子中，我们省略了 for 循环语句中的第一个和第三个表达式。这与 while 循环语句类似。请看下面的示例 -

<html>
<body>
  <p> First five natural numbers:</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>

输出

First five natural numbers:

1
2
3
4
5

您会注意到，没有第一个表达式(初始化)和第三个表达式(迭代)的 for 循环与 while 循环类似。