JavaScript 循环结构

循环结构（重点）

• 循环结构，就是根据某些给出的条件，重复的执行同一段代码

• 循环必须要有某些固定的内容组成

  1. 初始化

  2. 条件判断

  3. 要执行的代码

  4. 自身改变

WHILE 循环

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

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

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

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

  执行思路：

  • 1 先初始化条件,然后执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

  • 2 执行循环体代码

  • 3 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

  注意：

  • 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

断点调试

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

断点调试的流程：

1. 浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点

2. Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。

3. 摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

DO WHILE 循环

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

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

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

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

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

  执行思路

  • 1 先执行一次循环体代码

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

    注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码

FOR 循环

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

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

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

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

  • 名称	作用
    初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
    条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
    操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

    执行过程：

    1. 初始化变量，初始化操作在整个 for 循环只会执行一次。执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

    2. 执行操作表达式，此时第一轮结束。

    3. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。

    4. 继续执行操作表达式，第二轮结束。

    5. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

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

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

BREAK 终止循环

• 在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环

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

• 要终止循环，就可以直接使用 break 关键字

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

CONTINUE 结束本次循环

• 在循环中，把循环的本次跳过去，继续执行后续的循环

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

• 跳过本次循环，就可以使用 continue 关键字

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

  双重for循环

  双重 for 循环概述

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

  双重 for 循环语法

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

  • 内层循环可以看做外层循环的循环体语句

  • 内层循环执行的顺序也要遵循 for 循环的执行顺序

  • 外层循环执行一次，内层循环要执行全部次数

  • 打印五行五列星星

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

    核心逻辑：

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

    2.外层循环负责打印五行

  标识符命名规范

• 变量、函数的命名必须要有意义

• 变量的名称一般用名词

• 函数的名称一般用动词

操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
}

单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

其他规范

关键词、操作符之间后加空格