JavaScript For 循环 - 编程之门

JavaScript For 循环用于将一段语句重复执行一定的次数，直到给定的条件为假（False）。它是最常用的循环之一。本文将探讨 For 循环的语法、简单示例、迭代过程、实际应用以及优化性能的高级技术。

在 for 循环中，有三个由分号（;）分隔的表达式，这些表达式组件的执行过程如下：

JavaScript for 循环语法

for 循环的语法如下所示。

for (initialization; test condition; Expression to update counter value)
 {
    //Statement 1
    //Statement 2
     ………
    //Statement n
 }

初始化：For 循环以初始化语句开始。因此，首先完成计数器变量的初始化（例如，counter = 1 或 i=1.）。初始化部分仅在循环开始前在开头执行一次。
测试条件：将对计数器（已初始化）变量的值与给定条件进行测试。如果为真，则执行其中的语句。如果计算结果为假，JavaScript For 循环将终止，并将控件传递到 } 之后的下一行。
更新计数器值的表达式：此表达式将在每次迭代结束后执行，并负责更新计数器变量。增量和减量运算符可根据我们的需求增加或减少计数器变量。

让我用一个简单的例子来解释初始化、测试条件和更新计数器值的表达式。

for(i = 1, i <= 10, i++)
{
	// Statements to Execute for each iteration.
}

在此 JavaScript 示例中，初始化设置了 for 循环的初始值。因此，i = 1 是在循环开始之前执行的初始化。

测试条件是 i <= 10。在每次迭代时，都会使用更新后的 i 值（步骤 3）检查此条件。如果条件 i <= 10 的计算结果为真，则将执行大括号内的代码。如果 i <=10 为假，则 for 循环将终止。只要 i 的值小于或等于 10，它就会持续运行。请记住，如果您忘记更新 i 的值，它将变成一个无限循环。

更新计数器值的表达式是 i++。这意味着在每次迭代后，i 的值将增加 1。因此，将使用此新值测试条件 i <= 10。同样，您可以尝试 i–、i + 2、i – 2 等。

此过程将重复进行，直到 i 变为 11，并且条件 11 <= 10 的计算结果为假，此时循环终止。接下来，程序将继续执行其余代码。

JavaScript For 循环示例

此程序允许用户输入任何整数值。此程序将计算用户输入数字的自然数之和。

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

<body>
    <h1> JS example </h1>
<script>
    var i, number = 10, total = 0;
    for (i = 1; i <= number; i++)
    {
        total = total + i;
    }
    
    document.write("<b>Sum of N Natural Numbers is </b>= " + total);  
</script>
</body>
</html>

分析

在此 For 循环示例中，首先，我们声明了 number 变量并将其赋值为 10，而 total 变量将初始化为 0。
接下来，我们将检查计数器变量（i）是否小于或等于 number。
如果条件结果为真，i 将被加到 total 中。否则，它将退出。在开始时，i =1 且 n =10，因此条件将为 True，直到 i 的值增加到 11。
在下一部分中，我们使用了 ++ 运算符来递增 i 的值。在递增过程之后，它将重复该过程，直到表达式结果为 False（直到 i =11）。

For 循环的特点

JavaScript 中的 For 循环具有省略声明中一个或多个部分的灵活性。虽然我们可以从中跳过一个或多个部分，但我们必须将分号（;）放在适当的位置；否则，它将抛出编译错误。

可以在 For 循环中跳过计数器变量的初始化。在这里，计数器变量已在之前声明。

int i=1;

for( ;i<=10;i++)

与初始化一样，我们可以跳过增量部分，因为增量部分在主体内部声明。

int i=1;

for( ;i<=20; )
 {
   //statements     
   i++;
 }

JavaScript For 循环允许我们一次初始化多个计数器变量，用逗号分隔。

for(i=1,j=20; i<j; i++)

它还允许使用多个条件。我们必须使用逻辑运算符来分隔两个条件，而不是使用逗号。

for(i=1,j=20; i<=10 && j>=20; i++)
 {
   //statements
   j++;
 }

与测试条件一样，它允许我们使用多个增量运算符，如下所示。请记住，对于初始化、增量和减量运算符部分，我们可以使用逗号分隔多个声明。要分隔测试条件，您必须使用逻辑运算符来连接条件。

for(i=1,j=1; i<=10 && j<=10; i++, j++)

JavaScript 中的嵌套 For 循环

我们将一个 for 循环嵌套在另一个 for 循环内部，这称为嵌套 for 循环。

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

<body>
    <h1> JS Nested </h1>
<script>
    var i, j;
    for (i = 9; i <= 10; i++)
    {
        for (j = 1; j <= 10; j++)
        {
            document.write(i + "*" + j + "=: " + (i * j) + "<br \>"); 
        }
    }   
</script>
</body>
</html>

上面关于 For 循环示例的程序将打印 9 和 10 的乘法表。首先，i 初始化为值 9，然后它将检查 i 是否小于或等于 10。此条件直到 i 达到 11 才为 True。然后，如果此条件为 True，它将进入第二个循环。否则，它将退出。

在第二个 for 循环中，j 初始化为值 1。接下来，它将检查 i 是否小于或等于 10。此条件直到 i 达到 11 才为 True。

迭代 1：i = 9，条件为 True。因此进入第二个循环。j = 1 且 j <= 10 条件为 True，因此打印 {} 内的语句。

9 * 1 = 9

现在 j 的值将增加到 2。

9 * 2 = 9

它将重复该过程直到 10。

现在 j 的值为 11，条件失败，因此它将退出第二个循环。但是，它只会退出内部或第二个循环，而不会退出整个循环。

迭代 2：i = 10，条件为 True，因此重复上述过程。

迭代 3：i = 11，条件为 False。因此，它终止。无需检查第二个循环。