day04:js基础——循环语句

1. 循环结构介绍

• 循环结构的作用： 重复执行一段代码
• 构成：
  1. 初始条件
  2. 条件判断
  3. 循环体代码
  4. 条件变化

在每个编程语言中都会有循环结构，本文主要介绍while、do..while、for三种循环结构，以及continue、break在循环中的作用。

2. 三种循环结构

2.1 while循环

语法格式

  // 初始条件
   var n = 0
   // 条件判断
   while(n<=10){
       // 循环体代码
       console.log(n)
       // 条件变化
       n++
   }

以上是一个简单的while循环结构：
这里定义了一个初始条件n = 0[并不是固定写法，可根据需求来写]，在while后的小括号中写判断条件，这里条件为n<=10[并不是固定写法，可根据需求来写]。循环体代码是会重复执行的部分，最后进行条件变化[每次变化加1]。最终运行效果如下图：

2.2 do…while循环

语法格式

 // 初始条件
   var n = 0
   do{
       // 循环体代码
       console.log(n)
       // 条件变化
       n++
   }while(n<=10) // 条件判断

以上是一个简单的while循环结构：
这里定义了一个初始条件n = 0[并不是固定写法，可根据需求来写]，在while后的小括号中写判断条件，这里条件为n<=10[并不是固定写法，可根据需求来写]。循环体代码是会重复执行的部分，最后进行条件变化[每次变化加1]。最终运行效果如下图：
这里发现while、do…while的效果好像是一样的，那么两者到底有什么区别呢？
我们将上面的程序更改一下，将判断条件更改，观察以下代码会怎么执行

 	 // 初始条件
     var n = 0
      // 条件判断
      while(n<0){
          // 循环体代码
          console.log('我是while结构')
          // 条件变化
          n++
      }
      // 初始条件
      var n = 0
      do{
          // 循环体代码
          console.log('我是do..while结构')
          // 条件变化
          n++
      }while(n<0) // 条件判断

执行结果如下：
我们可以发现，当第一次判断条件都不满足的时候，do…while仍然将循环体的代码执行了一次。即区别在于不管什么情况，do..while循环总会至少执行一次循环体内的代码

2.3 for 循环

语法格式

        for(var n=1; n<=10;n++){
            console.log(n)
        }

步骤	作用
1	设置初始条件
2	条件判断
3	循环体代码
4	条件变化

for循环的执行顺序为1 -> 2 -> 3 -> 4,上面已经分析了每个步骤的含义这里不在详细分析

3.continue、break在循环中的作用

在上两小节介绍了三种循环的基本结构，本小节结合分支语句写一些demo，来帮助我们理解break、continue在循环中的作用以及循环中需要注意的事项。

3.1 实现1-100偶数的累加和

       // 常规写法
       var sum = 0
       for (var i = 1; i <= 100; i++) {
           if (i % 2 == 0) {
               sum += i
           }
       }
       console.log('常规：'+sum)

       // 利用continue实现
       var sum = 0
       for (var i = 1; i <= 100; i++) {
           if (i % 2 != 0) {
               continue
           }
           sum += i
       }
       console.log('continue：'+sum)


       // 利用条件变化实现
       var sum = 0
       for (var i = 0; i <= 100; i+=2) {
           sum += i
       }
       console.log('条件变化实现：'+sum)

运行结果：
我们发现，三种均实现了需求。
通过第二种实现方式与第一种对比可以看出在不满足偶数的时候continue会将当前的循环轮数跳过，不在执行continue之后的代码，直接进入条件变化然后进行条件判断进入下一轮循环

3.2 实现一个无限次的猜数游戏

想一下怎么实现无限次循环？ 怎么结束无限次循环？

	  //定义一个结果
      var res = 88
      // 无限循环
      while(true){
          var num = Number(prompt('请输入您猜的数字(1-100)'))
          if(num > res){
              alert('大了')
          }else if(num < res){
              alert('小了')
          }else{
              alert('猜对了')
              break	//猜对了结束
          }
      }

通过上面的代码可以发现将判断条件写为 true 的时候程序会一直执行，当我们猜中数字弹出猜对了，程序向下执行遇到break，循环结束所以break作用是结束循环。如果将break换成continue会发生什么情况呢？答案是不论你输入什么数字，程序都会一直让你猜下去形成死循环。

4. 总结

在使用循环的时候需要注意，当遇到需要重复进行计算或者判断的时候考虑使用循环，循环一般需要具有四个结构且不可以构成死循环结构（除非有特殊要求）
while与for循环应重点掌握，do…while了解即可。当循环条件与结束条件明确时推荐使用for循环，循环条件与结束条件不明确时推荐使用while循环。
continue： 用于跳过本次循环，即不执行continue后的代码进入下一轮
break： 用于结束循环。