8. 循环语句-for

1. for 循环

for 循环看起来就像这样：

for (begin; condition; step) {
  // ……循环体……
}

我们通过示例来了解一下这三个部分的含义。下述循环从 i 等于 0 到 3（但不包括 3）运行 console.log(i)：

for (var i = 0; i < 3; i++) { // 结果为 0、1、2
  console.log(i);
}

我们逐个部分分析 for 循环：

一般循环算法的工作原理如下：

开始运行
→ (如果 condition 成立 → 运行 body 然后运行 step)
→ (如果 condition 成立 → 运行 body 然后运行 step)
→ (如果 condition 成立 → 运行 body 然后运行 step)
→ ...

所以，begin 执行一次，然后进行迭代：每次检查 condition 后，执行 body 和 step。

如果你这是第一次接触循环，那么回到这个例子，在一张纸上重现它逐步运行的过程，可能会对你有所帮助。

以下是在这个示例中发生的事：

// for (var i = 0; i < 3; i++) console.log(i)

// 开始
var i = 0
// 如果条件为真，运行下一步
if (i < 3) { alert(i); i++ }
// 如果条件为真，运行下一步
if (i < 3) { alert(i); i++ }
// 如果条件为真，运行下一步
if (i < 3) { alert(i); i++ }
// ……结束，因为现在 i == 3

2. for循环示例

for (var i = 1; i < 13; i = i + 4) {
    console.log(i);
}

上方代码的遍历步骤：

程序一运行，将执行var i = 1;这条语句， 所以i的值是1。
然后程序会验证一下i < 13是否满足，1<13是真，所以执行一次循环体（就是大括号里面的语句）。
执行完循环体之后，会执行i=i+4这条语句，所以i的值，是5。

程序会会验证一下i < 13是否满足，5<13是真，所以执行一次循环体（就是大括号里面的语句）。
执行完循环体之后，会执行i=i+4这条语句，所以i的值，是9。

程序会会验证一下i < 13是否满足，9<13是真，所以执行一次循环体（就是大括号里面的语句）。
执行完循环体之后，会执行i=i+4这条语句，所以i的值，是13。

程序会会验证一下i < 13是否满足，13<13是假，所以不执行循环体了，将退出循环。

最终输出输出结果为：1、5、9

题目 1：

for (var i = 1; i < 10; i = i + 3) {
    i = i + 1;
    console.log(i);
}

输出结果：2、6、10

题目 2：

for (var i = 1; i <= 10; i++) {}
console.log(i);

输出结果：11

题目 3：

for (var i = 1; i < 7; i = i + 3) {}
console.log(i);

输出结果：7

题目 4：

for (var i = 1; i > 0; i++) {
    console.log(i);
}

死循环。

3. break 和 continue

3.1 跳出循环 break

通常条件为假时，循环会终止。

但我们随时都可以使用 break 指令强制退出。

for (var i = 0; i < 5; i++) {
    console.log("i的值:" + i);
    if (i == 2) {
        break; 
    // 注意，虽然在 if 里 使用了 break，但这里的 break 是服务于外面的 for 循环。
    }
    // break之后,下边语句也不再执行
}

3.2 继续下一次迭代 continue

continue 指令是 break 的“轻量版”。它不会停掉整个循环。而是停止当前这一次迭代，并强制启动新一轮循环（如果条件允许的话）。

如果我们完成了当前的迭代，并且希望继续执行下一次迭代，我们就可以使用它。

下面这个循环使用 continue 来只输出奇数：

for (var i = 0; i < 10; i++) {

  //如果为真，跳过循环体的剩余部分。
  if (i % 2 == 0){
      continue;
  }
  console.log(i); // 1，然后 3，5，7，9
}

对于偶数的 i 值，continue 指令会停止本次循环的继续执行，将控制权传递给下一次 for 循环的迭代（使用下一个数字）。因此 console 仅被奇数值调用。

显示奇数的循环可以像下面这样：

for (var i = 0; i < 10; i++) {

  if (i % 2 == 0) {
    console.log( i );
  }

}

4. 总结与练习

我们学习了三种循环：

• while —— 每次迭代之前都要检查条件。
• do..while —— 每次迭代后都要检查条件。
• for (;;) —— 每次迭代之前都要检查条件，可以使用其他设置。

通常使用 while(true) 来构造“无限”循环。这样的循环和其他循环一样，都可以通过 break 指令来终止。

如果我们不想在当前迭代中做任何事，并且想要转移至下一次迭代，那么可以使用 continue 指令。

4.1 for循环遍历求和

        // 求 1~100 之间的整数累加和
        // 需要循环100次，我们需要一个计数器  i  
        // 我们需要一个存储结果的变量 sum ，但是初始值一定是 0
        // 核心算法：1 + 2 + 3 + 4 ....   ，sum  =  sum + i;
        var sum = 0; // 求和 的变量
        for (var i = 1; i <= 100; i++) {
            // sum = sum + i;
            sum += i;
        }
        console.log(sum);

题目: 求1-100之间所有能被3整除的数字的和

4.2 for 循环嵌套

        // 1. 双重for循环 语法结构
        // for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
        //     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
        //         // 执行语句;
        //     }
        // }

        // 2. 我们可以把里面的循环看做是外层循环的语句

        // 3. 外层循环循环一次， 里面的循环执行全部

        // 4. 代码验证

        for (var i = 1; i <= 3; i++) {
            console.log('这是外层循环第' + i + '次');
            for (var j = 1; j <= 3; j++) {
                console.log('这是里层的循环第' + j + '次');
            }
        }

题目1:

        // 打印一下形式的星星字符串
        //★
        //★★
        //★★★
        //★★★★
        //★★★★★
        var str = '';
        for (var i = 1; i <= 5; i++) { // 外层循环负责打印五行
            for (var j = 1; j <= i; j++) { // 里层循环负责一行打印几个星星
                str = str + '★';
            }
            // 如果一行打印完毕, 就要另起一行 加 \n
            str = str + '\n';
        }
        console.log(str);

题目2:

    // 九九乘法表
       // 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
    // 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  
    // 内层的 for 循环控制每行公式  j  
    // 核心算法：每一行 公式的个数正好和行数一致， j <= i;
    // 每行打印完毕，都需要重新换一行
    var str = '';
    for (var i = 1; i <= 9; i++) { // 外层循环控制行数
        for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i
            // 1 × 2 = 2
            // str = str + '★';
            str += i + '×' + j + '=' + i * j + ';';
        }
        str += '\n';
    }
    console.log(str);