1. 循环

循环的目的：可以重复执行某些代码。

在Js中，主要有三种类型的循环语句：
for、while、do...while

2. for 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

2.1 语法结构

for 重复执行某些代码，通常跟计数有关系（1次还是100次？）
for 语法结构：
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
}
初始化变量是用 var 声明的一个普通变量，通常用于作为计数器使用
条件表达式用来决定每一次循环是否继续执行，是终止的条件
操作表达式是每次循环最后执行的代码，经常用于计数器变量进行更新（递增或者递减）

for 循环的执行过程

断点调试：
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮主观察程序的运行过程
浏览器中按F12-->sources -->找到需要调试的文件-->在程序的某一行设置断点
Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

2.2 for 循环重复执行相同的代码

可以让用户控制输出的次数

let num = prompt('请输入次数');
for (let i = 1; i <= num; i++) {
    console.log('你好');
}

2.3 for 循环重复执行不相同的代码

因为有计数器变量i，计数器i 在每次循环过程中都会有变化

// 想要输出一个人1~100岁
for (let i = 1; i <= 100; i++) {
    console.log(`这个人今年${i}岁了`);
}

2.4 for 循环重复执行某些操作

因为有计数器变量i，可以重复执行某些操作，比如做算术运算

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

2.5 for 循环举例

求1-100之间所有数的平均值。需要一个sum和的变量，需要一个平均值average变量。

let sum = 0;
let average = 0;
for (let i = 0; i <= 100; i++) {
    sum = sum + i;
}
average = sum / 100;

求1-100之间所有偶数和奇数的和。需要一个偶数和的变量，需要一个奇数和的变量。

let even = 0;
let odd = 0;
let result = 0;
for (let i = 0; i <= 100; i++) {
if(i % 2 == 0) {
    even = even + i
} else {
    odd = odd + i;
}
result = even + odd;

// 可以用三元表达式
i % 2 == 0 ? even += i : odd += i;

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

let result = 0;
for (let i = 0; i <= 100; i++) {
    if (i % 3 == 0) {
        result = result + i;
    }
}

3. 双重for 循环

3.1 概述

很多情况下，单层for 循环并不能满足需求，比如要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句称之为双重for循环。

3.3 语法结构

外层的循环循环一次，内层的循环执行全部

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    for (内层的初始化变量; 内层的条件表达式; 内层的操作表达式) {
        // 执行语句;
}

4. while 循环

语法结构： while 当...的时候

while (条件表达式) {
    // 循环体
}

执行思路：当条件表达式结果为true，则执行循环体；否则，退出循环。

let num = 1;
while (num <= 100) {
    console.log('你好！');
    num++;
}

里面应有计数器，初始化变量。
里面应有操作表达式，完成计数器的更新，防止死循环。

let age = 1;
while (age <= 100) {
    console.log(`这个人${age}岁了~`);
    age++;
}

// 弹出一个提示框，你爱我吗？ 如果输入我爱你，就提示结束；否则，一直询问。
let message = prompt('你爱我吗？');
while (message !== '我爱你') {
    message = prompt('你爱我吗？');
}

5. do while 循环

do...while循环是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

语法结构：

do {
    // 循环体
} while (条件表达式);

执行思路：先执行一次循环体，再判断条件，当条件表达式结果为true，则继续执行循环体；否则，退出循环。

do {
   console.log(`这个人${age}岁了~`);
   age++;
} while (age <= 100);

// 弹出一个提示框，你爱我吗？ 如果输入我爱你，就提示结束；否则，一直询问。
do {
   let message = prompt('你爱我吗？');
} while (message !== '我爱你');

6. 循环小结

三种循环很多情况下可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，常用for
while 和 do...while 可以做更复杂的判断条件，比 for 灵活
while 和 do...while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断执行
while 和 do...while执行次数不一样，do...while 至少会执行一次循环体，而 while 可能一次也不执行

7. continue break

7.1 continue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）。
例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下:

for (let i = 0; i <= 5; i++) {
    if (i === 3) {
        continue; // 只要遇见continue就退出本次循环，直接跳到i++
    }
    console.log(`正在吃第${i}个包子`);
}

7.2 break关键字

break 关键字用于立即跳出整个循环(循环结束)。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下:

for (let i = 0; i <= 5; i++) {
    if (i === 3) {
        break;
    }
    console.log(`正在吃第${i}个包子`);
}

JavaScript流程控制-循环