JavaScript while 循环

这是执行重复任务的常用方法。本文将解释 JavaScript while 循环的工作机制、语法、流程图以及如何迭代数据以对单个项目执行计算。此外，我们还将介绍无限 while 循环和一个实时复杂示例。

JavaScript 中的 while 循环可用于重复执行代码块或语句块，直到给定条件为 False。这个健壮的迭代器将帮助您遍历数据并为每次迭代实现复杂的逻辑。

JS 循环以 while 关键字开头，后跟条件。如果条件为 True，则执行其中的语句。如果条件为 False，则至少不会执行一次。这意味着 while 循环可能会执行零次或多次。

JavaScript while 循环语法

While 循环的语法如下

While( Condition )
 {
   statement 1;
   statement 2;
    ………….
 }
It is the statement Outside the While

从上面的语法来看，条件（也称为表达式）决定了 while 循环是否应该迭代。如果条件计算为 True，则花括号内的语句或语句组将被执行。一旦表达式变为 False，它将终止并执行 {} 之外的其他语句（在 } 之后）。

JS 中 while 循环的关键组成部分是什么？

条件：一个决定 JavaScript while 循环迭代是否应该运行或终止的表达式。请记住，如果表达式最初为 false，它将不会从代码块中返回任何内容。
代码块：用花括号 {} 括起来的代码或多条语句。只要条件返回 True，就会执行这些行。我们可以将代码块的执行称为迭代。
迭代：每次循环称为一次迭代。它从 { 点开始，在 } 点结束。
增量或减量值：这是最关键的组成部分。如果您忽略它，它将变成一个无限循环。

while() 循环如何工作？

在代码中，当遇到 while 循环时，它会在迭代开始之前首先评估条件。如果结果为 True，则执行 {} 中的语句。在循环结束之前，其中的增量和减量运算符会增加或减少值。迭代完成后，JavaScript while 循环将使用更新后的值再次评估表达式。此过程将重复进行，直到条件返回布尔 false。一旦返回 False，它将完全退出 {}。

JavaScript while 循环流程图

现在您已经掌握了 while 循环的理论知识；让我们看一个实际示例以更好地理解。while 循环的流程图如下所示。

JavaScript while 循环示例，用于添加数字

此示例将添加从 6 到 10 的数字并返回它们的总和。这是一个演示此 while 循环的简单示例。但是，您可以将变量 number 的值更改为 1，将条件从 10 更改为 20，或者以 2 为步长进行增量。

在此 while 循环程序中，我们声明了 number 和 total 变量，并将它们的值初始化为 6 和 0。通过使用它，编译器将这些值相加直到 10。

<!DOCTYPE html>
<html>
<head>
    <title> Example </title>
</head>

<body>
    <h1> Example </h1>
<script>
    var number = 6, total=0;
    while (number <= 10)
    {
        total = total + number;
        number++;
    }
    document.write("Total = ", total);  
</script>
</body>
</html>

在此，我们的 number = 6。这意味着，total = 6+7+8+9+10 = 40

分析

在此代码示例中，我们定义了带有条件 (number <= 10) 的 while 循环。
number 变量中的值（6）将与条件进行测试，即 (6 <= 10)。
如果条件结果为 true，则 number 将加到 total 中。否则，它将退出JavaScript 迭代。
将值添加到 total 变量后，我们使用 ++ 运算符来增加 number 的值。增加后，过程将重复，直到条件结果为 False。
它将继续执行，直到 number 达到 11。

JavaScript 中的无限 while 循环是什么？

如果您忘记在 while 循环代码块中递增或递减值。在这种情况下，条件将变为 true，它将无限次执行（也称为无限循环）。例如

<!DOCTYPE html>
<html>
<head>
    <title> JavaScriptWhileLoop </title>
</head>

<body>
    <h1> JavaScriptWhileLoop </h1>
<script>
    var x = 1;
    while (x < 10)
    {
        document.write("<br\> Value From the While Loop is = " + x);
    }
</script>
</body>
</html>

这里 x 始终为 1，而 x 始终小于 10。因此，它将一直执行下去。

如何在 JavaScript 中防止无限 while 循环？

您必须确保条件最终将返回 False。每个 while 循环都必须使用增量或减量运算符来增加或减少值，以便表达式变为 false。

让我们在上面的示例中向 while 循环添加增量运算符 (x++)。

<!DOCTYPE html>
<html>
<head>
    <title> Sample </title>
</head>

<body>
    <h1> Example </h1>
<script>
    var x = 1;
    while (x < 10)
    {
        document.write("<br\> Value = " + x);
        x++;
    }
</script>
</body>
</html>

现在，当它达到 10 时，条件将失败。让我们看看输出。

如何在 while 循环中使用 break 和 continue 语句？

JavaScript 允许您在 while 循环中使用 break 和 continue 语句。break 语句有助于终止或退出。而 continue 语句将跳过当前迭代并移至下一迭代。如果您使用 if 语句结合 break，则当满足条件时，迭代将结束。

下面的示例演示了 while 循环中的 break 和 continue 语句。在这里，我们将 number 初始化为 1。接下来，我们使用了两个 if 语句来检查条件。

如果 number 等于三，continue 语句将跳过打印该数字并移至下一个迭代。
如果 number 等于 6，break 语句将退出 {}。

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<script>
    var number = 1;

    while (number <= 10)
    {
      if(number == 3)
      {
        number++;
        continue;
      }
      document.write("<br\>" + number); 
      if (number == 6) 
      {
        break;
      }
      number++;
    } 

</script>
</body>
</html>