JavaScript 中的循环

编程语言中的循环是一种有助于在某些条件评估为真时重复执行一组指令/函数的功能。例如，假设我们要打印 10 次“Hello World”。这可以通过两种方式完成，如下所示：

迭代法

执行此操作的迭代方法是编写 document.write() 语句 10 次。

document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
< /script>
</code></pre></div></div><p align="center"><strong>使用循环</strong></p><p>在Loop中，语句只需要写一次，循环会执行10次，如下图： </p><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script type = "text/javascript">
var i;
  
for (i = 0; i < 10; i++) 
{
    document.write("Hello World!\n");
}
< /script>
</code></pre></div></div><p>目前，上述程序中的许多事情可能会让您感到困惑，但不用担心，在本教程结束时您将能够理解 JavaScript 中循环的所有内容。您可以观察到，在上述使用循环的程序中，我们只使用了一次 document.write 语句，但程序的输出仍然与我们使用了 document.write 语句 10 次的迭代程序的输出相同。</p><p>在计算机编程中，循环是重复的指令序列，直到达到特定条件。</p><ul><li>完成一项操作，例如获取一项数据并对其进行更改，然后检查某些条件，例如计数器是否达到规定的数量。</li><li><strong>计数器未达到：</strong>如果计数器未达到所需数量，则序列中的下一条指令返回到序列中的第一条指令并重复执行。</li><li><strong>计数器到达：</strong>如果条件已经达到，下一条指令“落入”到下一条顺序指令或分支到循环外。</li></ul><p><strong>主要有两种类型的循环：</strong></p><ol><li><strong>入口控制循环</strong>：在这种类型的循环中，测试条件在进入循环体之前进行测试。 <strong>For 循环</strong>和<strong>While 循环</strong>是入口控制循环。</li><li><strong>退出控制循环</strong>：在这种类型的循环中，测试条件在循环体的末尾进行测试或评估。因此，循环体将至少执行一次，而不管测试条件是真还是假。 <strong>do - while 循环</strong>是退出控制循环。</li></ol><p> JavaScript 主要提供了三种执行循环的方式。虽然所有方法都提供了类似的基本功能，但它们的语法和条件检查时间不同。让我们详细了解其中的每一个。</p><ol><li> <strong>while 循环：</strong> while 循环是一种控制流语句，它允许根据给定的布尔条件重复执行代码。 while 循环可以被认为是一个重复的 if 语句。<br><strong>句法 ：</strong> <div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">while (boolean condition)
{
   loop statements...
}
</code></pre></div><p>流程图： <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Loops_in_JavaScript_0.png" alt="while 循环" class="alignnone wp-image-166215"></p><ul><li> While 循环从检查条件开始。如果它评估为真，则执行循环体语句，否则执行循环后面的第一条语句。出于这个原因，它也被称为<strong>入口控制循环</strong></li><li>一旦条件被评估为真，循环体中的语句就会被执行。通常，这些语句包含正在为下一次迭代处理的变量的更新值。</li><li>当条件变为假时，循环终止，这标志着其生命周期的结束。 </li></ul><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script type = "text/javaScript">
// JavaScript program to illustrate while loop
  
    var x = 1;
  
    // Exit when x becomes greater than 4
    while (x <= 4)
    {
        document.write("Value of x:" + x + "<br />");
  
        // increment the value of x for
        // next iteration
        x++;
    }
  
< /script>
</code></pre></div></div><p>输出： </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">Value of x:1
Value of x:2
Value of x:3
Value of x:4
</code></pre></div></li><li> <strong>for 循环：</strong> for 循环提供了一种简洁的方式来编写循环结构。与 while 循环不同，for 语句在一行中使用初始化、条件和递增/递减，从而提供更短、易于调试的循环结构。<br><strong>句法：</strong> <div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">for (initialization condition; testing condition; 
                              increment/decrement)
{
    statement(s)
}
</code></pre></div><p>流程图： <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Loops_in_JavaScript_1.png" alt="java中的for循环" width="625" height="350" class="aligncenter size-full wp-image-141360"></p><ol><li><strong>初始化条件：</strong>这里，我们初始化正在使用的变量。它标志着一个 for 循环的开始。可以使用已经声明的变量，也可以声明变量，仅局部循环。</li><li><strong>测试条件：</strong>用于测试循环的退出条件。它必须返回一个布尔值。它也是一个<strong>入口控制循环</strong>，因为在执行循环语句之前检查了条件。</li><li><strong>语句执行：</strong>一旦条件被评估为真，循环体中的语句就会被执行。</li><li><strong>增量/减量：</strong>用于为下一次迭代更新变量。</li><li><strong>循环终止：</strong>当条件变为假时，循环终止，标志着其生命周期的结束。 </li></ol><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script type = "text/javaScript">
// JavaScript program to illustrate for loop
  
    var x;
  
    // for loop begins when x=2
    // and runs till x <=4
    for (x = 2; x <= 4; x++) 
    {
        document.write("Value of x:" + x + "<br />");
    }
  
< /script>
</code></pre></div></div><p>输出： </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">Value of x:2
Value of x:3
Value of x:4
</code></pre></div><p align="center"> <strong>for...在循环中</strong></p><p>JavaScript 还包括另一个版本的 for 循环，也称为 for..in 循环。 for..in 循环提供了一种更简单的方法来遍历对象的属性。这在 JavaScript 中学习对象之后会更清楚。但是这个循环在处理对象时被认为是非常有用的。</p><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">for (variableName in Object)
{
    statement(s)
}
</code></pre></div><p>在每次迭代中，Object 的属性之一被分配给名为<em>variableName</em>的变量，并且此循环继续进行，直到处理完 Object 的所有属性。让我们举个例子来演示如何使用 for..in 循环来简化工作。 </p><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script type = "text/javaScript">
// JavaScript program to illustrate for..in loop
  
    // creating an Object
    var languages = { first : "C", second : "Java", 
                      third : "Python", fourth : "PHP", 
                      fifth : "JavaScript" };
  
    // iterate through every property of the
    // object languages and print all of them
    // using for..in loops
    for (itr in languages) 
    {
        document.write(languages[itr] + "<br >");
    }
  
< /script>
</code></pre></div></div><p>输出： </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">C
Java
Python
PHP
JavaScript
</code></pre></div></li><li> <strong>do while：</strong> do while循环与while循环类似，不同之处在于它在执行语句后检查条件，因此是<strong>退出控制循环的一个例子。</strong><br><strong>句法：</strong> <div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">do
{
    statements..
}
while (condition);
</code></pre></div><p>流程图： <br><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/Loops_in_JavaScript_2.png" alt="做时" class="alignnone wp-image-166218"></p><ol><li> do while 循环从执行语句开始。第一次没有检查任何条件。</li><li>在执行语句和更新变量值之后，检查条件的真值或假值。如果它被评估为真，则循环的下一次迭代开始。</li><li>当条件变为假时，循环终止，这标志着其生命周期的结束。</li><li>重要的是要注意 do-while 循环将在检查任何条件之前至少执行一次其语句，因此是退出控制循环的一个示例。 </li></ol><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script type = "text/javaScript">
// JavaScript program to illustrate do-while loop
  
    var x = 21;
  
    do 
    {
        // The line while be printer even
        // if the condition is false
        document.write("Value of x:" + x + "<br />");
  
        x++;
    } while (x < 20);
  
< /script>
</code></pre></div></div><p>输出： </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">Value of x: 21
</code></pre></div></li></ol><p align="center"><strong>无限循环</strong></p><p>实现任何类型的循环时最常见的错误之一是它可能永远不会退出，即循环运行无限时间。当条件由于某种原因失败时会发生这种情况。<br>例子： </p><div class="noIdeBtnDiv"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script type = "text/javaScript">
// JavaScript program to illustrate infinite loop
  
    // infinite loop because condition is not apt
    // condition should have been i>0.
    for (var i = 5; i != 0; i -= 2)
    {
        document.write(i);
    }
      
    var x = 5;
  
    // infinite loop because update statement
    // is not provided.
    while (x == 5) 
    {
        document.write("In the loop");
    }
  
< /script>
</code></pre></div></div><div class="textBasedMannualAds_2"></div><br></div></article>

                </div>

            </div>
        </div>
    </div>
</div>


  
<footer>
    <div class="bg-white text-center pb-1">
        <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright &copy; 2020 - 2024 版权所有
            <br>

            <a href="https://beian.miit.gov.cn/" target="_blank"
                class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a>

            <br>
            Made with ❤️ in Chengdu
        </p>
    </div>
</footer>


  <!-- 引入Bootstrap JavaScript库 -->
  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous">