十、循环

10.1、for循环

10.1.1、语法结构

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}
复制代码

10.1.2、执行流程

   执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

10.1.3、断点调试

   断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程。

断点调试的流程：

1. 浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2. Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3. 摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

10.2、双重for循环

10.2.1、概述

   循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

10.2.2、语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}
复制代码

  比如我们打印五行无列星星。核心逻辑大致为：

1. 内层循环负责一行打印五个星星
   
2. 外层循环负责打印五行
   

var star = '';
for (var j = 1; j <= 3; j++) {
    for (var i = 1; i <= 3; i++) {
      star += '☆'
    }
    // 每次满 5个星星 就 加一次换行
    star += '\n'
}
console.log(star);
复制代码

10.3、while循环

10.3.1、语法结构

while (条件表达式) {
    // 循环体代码 
}
复制代码

10.3.2、执行思路

   **使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环。**他的执行思路：

1. 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
   
2. 执行循环体代码
   
3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
   

10.4、do-while循环

10.4.1、语法结构

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
复制代码

10.4.2、执行思路

   先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码。他的执行思路：

1. 先执行一次循环体代码
   
2. 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
   

10.5、continue关键字

   continue 关键字用于立即跳出本次循环**，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。**

// 例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子。
for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }
复制代码

10.6、break关键字

   break 关键字用于立即跳出整个循环（循环结束）。

// 吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了。
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }
复制代码