JavaScript for 循环

在 JavaScript 中，除了 while 语句以及 do while 语句，我们还可以使用 for 语句来实现循环。

JavaScript for 语法

在 JavaScript 中，for 循环是最常用的循环语句，它用于指定次数重复执行代码块。

语法：

for (初始化表达式; 条件表达式; 循环后操作) {
    ……
}

说明：

for 语句由 3 部分组成，说明分别如下。

初始化表达式：一般用于定义 “用于计数的变量” 的初始值。
条件表达式：表示退出循环的条件，类似 while 循环中的条件（比如 n<100）。
循环后操作：指的是执行循环体（也就是大括号中的程序）后的操作，类似于 while 循环中的 n++ 之类的。

注意: for 语句的 3 部分都是可选的，不一定都要用到。

JavaScript for 示例

对于初学的小伙伴来说，仅仅看上面的语法是无法理解的，我们还是先来看几个简单的例子。

示例 1：for 循环打印 0~4 的数字

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        for (let i = 0; i < 5; i++ ) {
            console.log(i);
        }
    </script>
</body>
</html>

运行结果如下。

分析：

在 for 循环中，首先定义一个用于计数的变量 i，其中 i 的初始值为 0。然后定义一个判断条件 i < 5，只要 i 小于 5 就会执行 for 循环中的程序。最后定义一个循环后的表达式 i++，也就是说，每次循环之后都会进行一次 i++。

第 1 次执行 for 循环。

初始化：const i = 0;

判断：i < 5（i 的值为 0，返回 true）

输出：0

更新：i++（执行后 i = 1）

第 2 次执行 for 循环。

判断：i < 5（i 的值为 1，返回 true）

输出：1

更新：i++（执行后 i = 2）

……

第 5 次执行 for 循环。

判断：i < 5（i 的值为 4，返回 true）

输出：4

更新：i++（执行后 i = 5）

第 6 次执行 for 循环。

判断：i < 5（i 的值为 5，返回 false）。由于 i < 5 返回 false，因此条件不满足，退出 for 循环。

当然，这个例子我们也可以使用 “while 循环” 或者 “do while 循环” 来实现。因为程序是活的，不是死的。想要实现某一个功能，方式是多种多样的。

示例 2：for 循环的应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        for (let i = 2; i < 5; i++) {
            let str = "<p style='font-size:" + i * 5 + "px'>总有刁民想害朕</p>";
            document.write(str);
        }
    </script>
</body>
</html>

页面效果如下图所示。

for循环的应用

分析：

小伙伴要特别注意了，这里的 for 循环，变量 i 的初始值是 2 而不是 1。在循环体中，我们使用 “拼接字符串”（也就是用加号拼接）的方式来构造一个 “HTML 字符串”。大家好好琢磨一下这个例子，非常有用噢。

示例 3：for 版本的 “死循环”

运行代码

<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        for (;;) {
            console.log("根本停不下来...");
        }
    </script>
</body>
</html>

运行结果如下。

根本停不下来...
根本停不下来...
根本停不下来...
……

分析：

for 语句的 3 部分都是可选的，当 3 个部分都是空语句时，就会变成一个 “死循环”。小伙伴们可以将其与 while 死循环对比一下。

很多没有编程基础的初学者在 for 循环都会卡一下，对这种语法感到很难理解。其实大家都这样过来的，并不是你一个。所以不要老埋怨自己笨，因为谁都做过小白。语法记不住没关系，等你要用了，回来这里对着这几个例子 “抄” 过去，然后写多两次，自然就会了。