Javascript的循环结构

一、什么是循环结构

• 循环结构，就是根据某些给出的条件，重复的执行同一段代码
• 循环必须要有某些固定的内容组成：1. 初始化 2. 条件判断 3. 要执行的代码 4. 自身改变
• 特征：1.有规律性的重复操作 2.重复操作的代码极其相似

二、循环结构的语法

 核心思想:当针对重复数据操作,"循环思想"
         for:开发中最常见的
         while:其次
         do-while:很少使用的在开发中

for循环:  明确循环的次数,使用for
 while循环:不明确循环的次数,使用while
 常见的死循环:  while(true){
                        //当满足某种条件的时候,break; 结束循环!
                           }

1. WHILE 循环

• while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了

• 语法 while (条件) { 满足条件就执行 }

• 因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了

// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
  // 3. 要执行的代码
  console.log('当前的 num 的值是 ' + num)
  // 4. 自身改变
  num = num + 1
}

• 如果没有自身改变，那么就会一直循环不停了

•  while格式
               *     初始化语句;
               * while(条件表达式){
                   循环体语句;
                   控制体语句(步长语句) ;  
               }
               
               执行流程:
                  1)初始化语句对变量赋值
                  2)判断条件表达式是否成立,
                  成立,则执行循环体,一次执行步长语句;
                  3)再次判断条件表达式是否成立,....
                  ..
                  4)条件不成立,循环结束!

2. DO WHILE 循环

• 是一个和 while 循环类似的循环

• while 会先进行条件判断，满足就执行，不满足直接就不执行了

• 但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断

• 语法： do { 要执行的代码 } while (条件)

// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {
  console.log('我执行了一次')
  num = num + 1
} while (num < 10)

do-while格式  实际开发场景下,用的很少!
             * 初始化语句;
             * do{
                 循环体语句;
                 控制体语句(步长语句);
             }while(条件表达式) ;
             
             执行流程:
                1)初始化语句对变量赋值
                2)直接执行循环体语句,步长语句进行++或者--,然后执行条件是否成立
                3)成立,继续执行循环体以及步长语句
                ...
                4)条件表达式成立,不成立

3. FOR 循环（重点）

• 和 while 和 do while 循环都不太一样的一种循环结构

• 道理是和其他两种一样的，都是循环执行代码的

• 语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
  // 这里写的是要执行的代码
  console.log(i)
}

// 控制台会依次输出 1 ~ 10 

• 这个只是看起来不太舒服，但是用起来比较好用

• for()括号中的表示式皆可以省略，但分号不可省略。

• 省略了表达式2(循环条件), 若不做其它处理则成为死循环。

• 死循环：没有终止条件并一直执行的循环即为死循环。

• or循环的嵌套，可以简单的理解为行和列的关系。

for(初始化语句;条件表达式;控制体语句){
                循环体语句;
             }
                执行流程:
                 1首先初始化语句执行一次,给变量赋值
                  2判断条件表达式是否成立,如果成立,就执行循环体语句
                  3继续执行控制体语句(也称为"步长语句"),++或者-- 对变量自增或者自减1
                  4继续判断条件表达式是否成立,如果成立,继续执行循环体语句,执行控制体语句,
                  5直到条件表达式不成立,for循环结束!

4. FOR、WHILE 和 DO WHILE 的区别

• while 循环是先判断，再执行，有可能一次都不执行。

• do/while 循环是先执行，再判断，至少执行一次代码块。

• for 循环一般用在循环次数可以确定的情景。

• while 循环一般用在循环次数未知的情景。

5. Break 和 Continue 关键字

• break关键字使用在循环中，在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环。

• 比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情

for (var i = 1; i <= 5; i++) {
  // 没循环一次，吃一个包子
  console.log('我吃了一个包子')
  // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
  // 循环就不会继续向下执行了，也就没有 4 和 5 了
  if (i === 3) {
    break
  }
}

• continue关键字使用在循环中，他代表跳过本次循环，继续执行后续的循环。

• 比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个

for (var i = 1; i <= 5; i++) {
  // 当 i 的值为 3 的时候，执行 {} 里面的代码
  // {} 里面有 continue，那么本次循环后面的代码就都不执行了
  // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
  if (i === 3) {
    console.log('这个是第三个包子，掉地下了，我不吃了')
    continue
  }
  console.log('我吃了一个包子')
}

• 使用 for 和 if 结合，实现跳过某次循环以及符合某个条件退出循环。