Javascript 简明教程

JavaScript - While Loops

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

在编写程序时,您可能会遇到需要一遍又一遍地执行某个操作的情况。在这种情况下,您需要编写循环语句,以减少代码行数。

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

JavaScript 中有 2 种 while 循环,如下所示:

  1. Entry-controlled loops − 该循环首先检查循环条件是否有效,然后进入循环体执行循环语句。

  2. Exit-controlled loops − 该循环进入循环体并执行循环语句,而不检查条件。完成迭代之后,它检查条件。

JavaScript while Loop

JavaScript 中最基本的循环是 while 循环,本教程将对此进行讨论。while 循环是入口受控循环。

while 循环的目的是在 expression 为 true 的情况下重复执行语句或代码块。一旦表达式变为 false, ,循环将终止。

Flow Chart

while loop 的流程图如下所示 −

while loop

Syntax

while loop 在 JavaScript 中的语法如下所示 −

while (expression) {
   Statement(s) to be executed if expression is true
}

Example

在下面的示例中,我们定义了变量“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>

Output

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 Loop

do…​while 循环与 while 循环类似,区别在于条件检查发生在循环结尾。这意味着循环将始终至少执行一次,即使条件为 false

Flow Chart

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

do while loop

Syntax

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

do {
   Statement(s) to be executed;
} while (expression);

Example

在下面的示例中,我们使用了 do…​while 循环,并一直打印输出中的结果,直到 count 变量的值小于 5。在输出中,我们可以观察到它总是执行一次,即使条件为 false。

<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>

Output

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 vs. for Loops

JavaScript while 循环与 for 循环类似,但省略了第一个和第三个表达式。当迭代次数是固定的并且已知时,通常使用 for 循环,但当迭代次数未知时,我们使用 while 循环。

Example

让我们举一个使用 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

Example

我们现在可以如下修改上述 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>

输出

First five natural numbers:

1
2
3
4
5

Example

在上述示例中,我们在 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 循环。