循环的主要目的就是为了重复执行代码。使我们的代码更高效。
在JS中，主要有三种循环语句：for循环、while循环、do…while循环。

一、for循环

1．for循环的概念：

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

2．for循环的语法结构

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

  1.   <script> 
  2.         for (初始化变量; 条件表达式; 操作表达式) {
  3.             循环体
  4.         }
  5.   </script>
  1.   - 初始化变量——用var声明的一个普通变量，通常用于作为计数器使用
  2.   - 条件表达式——用来决定每一次循环是否继续执行就是终止的条件
  3.   - 操作表达式——每次循环最后执行的代码，经常用于计数器变量进行更新（递增或者递减）

3．for循环的代码体验：

体验1.执行相同的代码循环—打复印打印100句“你好”

<script>   
    //打复印打印100句“你好”
    for (var i = 1; i <= 100; i++) {
      console.log('你好');
    }
</script>

4．for循环的执行流程：

① 首先执行里面的计数器变量vari=i.但是这句话在 for 里面只执行一次。
② 执行i<=100 来判断是否满足条件，如果满足条件就去执行循环体不满足条件退出循环。
③ 最后去执行i++， i++ 是单独写的代码递增，第一轮结束。
④ 接着去执行i<=100 ，如果满足条件就去执行循环体，不满足条件退出循环，第二轮。

5．认识断点调试：

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行的显示错误，停下。
断点调试可以帮我们观察程序的运行过程
浏览器中按F12->sources->找到需要调试的文件->在程序的某一行设置断点
Watch:监视，通过watchi可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行一行的执行，这个时候，观察wtch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试。

5．for循环的案例说明：

（1） 案例1：让用户控制输出的次数

<script> 
      //体验2.让用户控制输出的次数
        var num=prompt('请您输入次数')
        for (let i = 1; i <= num;i++){
        console.log('好好学习，天天向上');
        }
</script>

图片1.png

（2）案例2：执行不同的代码循环

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

图片2.png

（3）案例3：嵌套if 语句使用

<script> 
    //体验4，嵌套 if 语句使用
    for (i = 1; i <= 100; i++) {
      if (i == 1) {
        console.log('他1岁了,这是他降生的一年');
      } else if (i == 18) {
        console.log('他今年18岁了,他成年了');
      } else if (i == 22) {
        console.log('他今年22岁了,这 一年他娶妻生子了');
      } else if (i == 50) {
        console.log('他今年50岁了,他当爷爷了');
      } else if (i == 100) {
        console.log('他今年100岁了,他今年去世了');
      } else {
        console.log(`他今年${i}岁了`);
      }
    }
</script>

图片3.png

（4）案例4：for循环重复某些相同操作

for循环因为有了计数器的存在，我们还可以重复执行某些操作，比如做一些算术运算。
例： 求1-100之间所有整个数的累加和（结果是5050）
案例分析：
① 需要循环100次，我们需要一个计数器i
② 我们需要一个存储结果的变量sum,但是初始值一定是0
③ 核心算法：1+2+3+4…，sum=sum+i

<script> 
      var sum = 0;  //求和的变量 
      for (var i = 1; i <= 100; i++) {
        sum = sum + i;  //可以写成sum+=i:
      }
      console.log(sum);
</script>

image.png

（5）案例5：求1-100之间所有数的平均值

<script> 
    var sum = 0; //需要一个 sum 和的变量
    var average = 0; //需要一个平均值 average 变量
    for (var i = 1; i <= 100; i++) {
      sum += i;
    }
    average = sum / 100;
    console.log(average);
</script>

image.png

（6）案例6： 求1-100之间所有偶数和奇数的和

<script> 
    var even = 0; //需要一个偶数的和变量 even
    var odd = 0; //需要一个奇数的和变量 odd
    for (var i = 1; i <= 100; i++) {
        if (i % 2 == 0) {
          even += i;
        } else {
          odd += i;
        }
     }
    console.log(`1~100之间的偶数和是${even}`);
    console.log(`1~100之间的奇数和是${odd}`);
</script>

image.png

（7）案例7： 求1-100之间所有能被3整除的数字的和

<script> 
       var result = 0;          
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result += i;
            } 
        }   
        console.log(`1~100之间所有能被3整除的数字的和是${result}`); 
</script>

image.png

（8）案例8：加强练习——求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。
案例分析：
① 弹出输入总的班级人数num
② 依次输入学生的成绩(保存起来score ),此时我们需要用到for循环，弹出的次数跟班级总人数有关系，条件表达式ⅰ<=num
③ 进行业务处理：计算成绩。先求总成绩(sum),之后求平均成绩(average)
④ 弹出结果

<script> 
        var num = prompt('请输入班级的总人数'); //num 班级的总人数
        var sum = 0;            // 求和的变量
        var average = 0;        //求平均值的变量
        for (var i = 1; i <= num; i++) {
            var score = prompt(`请您输入第${i}个学生成绩`);
        //注意：因为从 prompt 取到的值是字符串，需要转换为数字型的才能进行计算
            sum += parseFloat(score); 
        }
        average = sum / num;
        alert(`班级总的成绩是:${sum}`)
        alert(`班级平均分是:${average}`)
</script>

图片5.png

（9）案例9：在控制台上一行打印10个星星

我们采取追加字符串的方式，这样可打印到控制台上。

<script>         
      var str = ''
      for (var i = 1; i <= 10; i++) {
        str += '⭐'
      }
      console.log(str);
</script>

image.png

<script>         
        //让用户输入需要几个星星      
        var num = prompt('请问您需要打印几个星星')
        var str = '';
        for (var i = 1; i <= num; i++) {
            str += '⭐'
        }
        console.log(str);
</script>

image.png
image.png

二、双重for 循环

1．双重for 循环的概念：

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

2．双重for 循环的语法结构 

<script> 
    for (外层初始化变量;外层条件表达式;外层操作表达式){
        for (里层初始化变量;里层条件表达式;里层操作表达式){
          执行语句；
        }
    }
</script>

  - 我们可以把里面的循环看做是外层循环的语句
  -  外层循环循环一次，里面的循环执行全部

3．双重for 循环的代码验证：

<script>               
      for (var i=1;i<=3;i++){
        console.log(`这是外层循环第${i}次`);
        for (var j=1;j<=3;j++){
          console.log(`这是里层循环第${j}次`);
        }
      }
</script>

4．双重for 循环的案例说明：

（1）案例1：在控制台上五行五列打印星星

案例分析：
① 内层循环负责一行打印五个星星
② 外层负责打印五行

<script>  
    var str = '';
    for (var i = 1; i <= 5; i++) {
      for (var j = 1; j <= 5; j++) {
        str += '⭐';
      }
      //打印完一行后换行
      str += '\n'
    }
    console.log(str);
</script>

image.png

（2）案例2：让客户制台输出的N行N列星星

<script> 
     var rows = prompt('请您输入行数:');
        var cols = prompt('请您输入列数:');
        var str = '';
        for (var i = 1; i <= rows; i++) {  
            for (var j = 1; j <= cols; j++) {  
                str += '⭐';
            }           
            str += '\n'
        }
        console.log(str);
</script>

图片6.png

（3）案例3：打印倒三角

<script> 
       var str = '';
        for (var i = 1; i <= 10; i++) { //打印行
            for (var j = i; j <= 10; j++) { //里打印个的个数不一样， j=i
                str += '⭐';
            }
            str += '\n'
        }
        console.log(str);
</script>

图片2.png

（4）案例4：打印正三角

<script> 
      var str = '';
        for (var i = 1; i <= 10; i++) { //打印行
            for (var j = 1; j <= i; j++) { //里打印个的个数不一样， j=i
                str += '⭐';
            }
            str += '\n'
        }
        console.log(str);
</script>

图片3.png

（5）案例5：打印九九乘法表

案例分析
① 一共有9行，但是每行的个数不一样，因此需要用到双重for循环
② 外层的for循环控制行数ⅰ，循环9次，可以打印9行
③ 内层的for循环控制每行公式j
④ 核心算法：每一行公式的个数正好和行数一致，j<=i;
⑤ 每行打印完毕，都需要重新换一行

<script> 
     var str = '';
        for (var i = 1; i <= 9; i++) { //打印行
            for (var j = 1; j <= i; j++) { //里打印个的个数不一样， j=i
                str += '⭐';
            }
            str += '\n'
        }
        console.log(str);
    </script>
</script>

图片4.png

5、for循环总结

(1) for循环可以重复执行某些相同代码
(2) for循环可以重复执行些许不同的代码，因为我们有计数器
(3) for循环可以重复执行某些操作，比如算术运算符加法操作
(4) 随着需求增加，双重for循环可以做更多、更好看的效果
(5) 双重for循环，外层循环一次，内层for循环全部执行
(6) for循环是循环条件和数字直接相关的循环
(7) 分析要比写代码更重要,一些核心算法想不到，但是要学会，分析它执行过程

三、while循环

1．while循环的概念：

whil语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到俵达式不为真时结束循环。

2．while循环的语法结构：

<script> 
    //while 循环的语法结构
        while (条件表达式) {
            循环体
        }
</script>

3. while循环的注意事项

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

4.while循环的代码验证

<script> 
    var num = 1;
    while (num <= 10) {
      console.log('看我循环10次,第11次就不循环了.');
      num++;
    } 
</script>

5.while循环的执行思路：

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

6．while循环的案例说明：

（1) 案例1：打印人的一生，从1岁到100岁

<script> 
    //1.打印人的一生，从1岁到100岁
    var i = 1;
    while (i <= 100) {
        console.log(`他今年${i}岁了`);
        i++;
    }
</script>

图片7.png

（2）案例2：计算1~100之间所有整数的和

<script> 
//2.计算1~100之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
sum += j;
j++;
}
console.log(sum);
</script>

图片5.png

（3）案例3：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问。

<script> 
    //3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问。
    var message = prompt('你爱我吗?');
    while (message !== '我爱你') {
        message = prompt('你爱我吗？')
    }
    alert('我就知道你是爱我的，我也爱你哦)；
</script>

图片8.png

四、Do while循环

1．Do while循环的概念

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

2．Do while循环的语法结构：

<script>
    do {
    循环体
    }while (条件表达式) 
</script>

3．Do while循环的执行思路：

① 先执行一次循环体代码
② 再执行条件表达式，如果结果为true,则继续执行循环体代码，如果为false,则退出循环，继续执行后面代码。
注意：先再执行循环体，再判断，我们会发现do.while循环语句至少会执行一次循环体代码

4．Do while循环的代码验证：

<script>
      //代码验证
      var i = 1;
      do {
          console.log('我是一个程序员');
          i++;
      } while (i <= 10)
</script>

5．Do while循环案例说明：

（1）案例1：打印人的一生，从1岁到100岁

<script>
    //1.打印人的一生，从1岁到100岁
    var i = 1;
    do {
        console.log(`他今年${i}岁了`);
        i++;
    } while (i <= 100);
</script>

图片9.png

（2）案例2：计算1~100之间所有整数的和

<script>
    //2.计算1~100之间所有整数的和
    var sum = 0;
    var j = 1;
    do {
        sum += j;
        j++;
    } while (j <= 100);
    console.log(sum);
</script>

image.png

（3）案例3：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问。

<script>
//3.弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问。
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我就知道你是爱我的，我也爱你哦)
</script>

图片8.png

6、循环小结

① JS中循环有for、while、do while
② 三个循环很多情况下都可以相互替代使用
③ 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用fo
④ while和do.while可以做更复杂的判断条件，比for循环灵活一些
⑤ while和do..while执行顺序不一样，while先判断后执行，do.while先执行一次，再判断执行
⑥ while和do.while执行次数不一样，do.while至少会执行一次循环体，而while可能一次也不执行
⑦ 实际工作中，我们更常用f0r循环语句，它写法更简洁直观，所以这个要重点学习

五、Continue break 关键字

1．Continue关键字的概念：

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

2．Continue 关键字的代码体验：

（1）不吃第三个包子

<script>
    //Continue 代码体验：不吃第三个包子
    for (var i = 1; i <= 5; i++) {
        if (i == 3) {
            continue; //只要遇见 continue 就退出本次循环直接跳到下一次循环。
        }
        console.log(`我正在吃第${i}个包子`);
    }
</script>

图片6.png

（2）求1 ！100之间，除了能被7整个除去之外的整个数和

<script>
    //Continue 代码体验2：求1！100之间，除了能被7整个除去之外的整个数和
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 7 == 0) {
        continue;
        }
        sum += i;
    }
    console.log(sum);
</script>

图片7.png

3．Break 关键字的概念：

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

4．Break 关键字的代码体验：

（1）不吃第三个包子

<script>
    //Break 关键字的代码体验：
    for (var i=1;i<=5;i++){
        if(i==3){
        break;
        }
    console.log(`我正在吃第${i} 个包子`);
    }
</script>

图片8.png