JavaScript 流程控制 - 循环

JavaScript 流程控制 - 循环

目标

• 能够说出循环的目的
• 能够说出 for 循环的执行过程
• 能够使用断点调试来观察代码的执行过程
• 能够使用 for 循环完成累加求和等案例
• 能够使用双重 for 循环完成乘法表案例
• 能够说出 while 循环和 do while 循环的区别
• 能够说出 break 和 continue 的区别

目录

• 循环
• for 循环
• 双重 for 循环
• while 循环
• do while 循环
• continue break

1. 循环

1.1 循环目的

• 在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

1.2 JS中的循环

在 JS 中，主要有三种类型的循环语句：

• for 循环
• while 循环
• do … while 循环

2. for 循环

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

2.1 语法结构

for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

    <script>
      // 1. for 重复执行某些代码 通常跟计数有关系
      // 2. for 语法结构
      // for(初始化变量,条件表达式,操作表达式){
    
      // 循环体
      // }
      // 3. 初始化变量 就是用 var 声明的一个普通变量 通常用于作为计数器使用
      // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
      // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新 (递增或者递减)
      // 6. 代码体验 我们重复打印100句 你好
      for (var i = 1; i <= 100; i++) {
    
        console.log("你好");
      }
    </script>

执行过程：

    <script>
      // for 循环的执行过程
      for (var i = 1; i <= 100; i++) {
    
        console.log("你好");
      }
      // 1. 首先执行里面的计数器变量 var i = 1 但是这句话在for里面只执行一次 index
      // 2. 去 i <= 100 来判断是否满足条件  如果满足条件 就去执行 循环体 不满足条件退出循环
      // 3. 最后去执行 i++  i++是单独写的代码  递增  第一轮结束
      // 4. 接着去 i <= 100 来判断是否满足条件  如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮 去循环
    </script>

断点调试：

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

断点调试可以帮助我们观察程序的运行过程

• 浏览器中按 F12 --> sources --> 找到需要调试的文件 --> 在程序的某一行设置断点
• Watch：监视，通过 watch 可以监视变量的值的变化，非常的常用
• F11：程序单步执行，让程序一行一行的执行，这个时候，观察 watch 中变量的值的变化
• 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决 bug 的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
• 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

2.2 for 循环重复相同的代码

    <script>
      // for 循环可以执行相同的代码
      for (var i = 0; i <= 10; i++) {
    
        console.log("媳妇我错了");
      }
      // 我们可以让用户控制输出的次数
      var num = prompt("请您输入次数");
      for (var i = 1; i <= num; i++) {
    
        console.log("媳妇我错了");
      }
    </script>

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

for 循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

    <script>
      // for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在 i每次循环值都会变化
      // 我们想要输出1个人 1~100岁
      for (var i = 1; i <= 100; i++) {
    
        console.log("这个人今年" + i + "岁了");
      }
      for (var k = 1; k <= 100; k++) {
    
        if (k == 1) {
    
          console.log("这个人今年1岁了，他出生了");
        } else if (k == 100) {
    
          console.log(