JS-6 while循环；do..while循环；for循环；for循环的嵌套；循环的跳转控制

1_认识循环语句

循环操作例子：

• 把一个列表中的商品、歌曲、视频依次输出进行展示；
• 对一个列表进行累加计算；
• 运行相同的代码将数字 1 到 10 逐个输出；

循环 （一种重复运行同一代码的方法）， 如果是对某一个列表进行循环操作，我们通常也会称之为 遍历（traversal）或者迭代（iteration）

在JavaScript中支持三种循环方式：

• while循环；

• do…while循环；

• for循环；

2_while循环

语法：

• 当条件成立时，执行代码块； 当条件不成立时，跳出代码块；

    while (条件) {
    	//代码块
    }

如果条件一直成立（为true），会产生死循环

• 这个时候必须通过关闭页面来停止死循环；

• 开发中一定要避免死循环的产生

// 死循环，没有条件为假的情况
    while (true) {
      console.log("Hello")
    }

3_do…while循环

do…while循环和while循环非常像，二者经常可以相互替代(不常用)。

但是do…while的特点是不管条件成不成立，do代码块都会先执行一次

//语法：
 do {
   //代码块
} while (条件)


// 练习: 打印10次Hello World
    var count = 0
    do {
      console.log(count + "Hello World")
      count++
    } while (count < 10)

    console.log(count )  
    //循环结束，此时count = 10，意味着count++执行了11次

4_ for循环

for循环是最常使用的循环形式

//  语法
//  1) begin 开头只执行一次。
//  2) 如果符合 condition ，首先执行 循环代码块 ，然后执行 step。如果不符合condition，跳出循环。
//  3) 循环第二步，直到跳出循环。
for(begin ; condition ;step){
	//循环代码块
}

//例子
for(let i = 0 ; i<3 ; i++ ){
  alert(i)
}

for循环的嵌套

在开发中，某些情况下一次循环是无法达到目的的，我们需要循环中嵌套循环；

 <script>
    //【例子】打印九九乘法表
    for (var i = 0; i < 9; i++) {
      document.write("<div>")
      //嵌套
      for (var m = 0; m < i+1; m++) {
        var a = m + 1
        var b = i + 1
        var result = (m+1)*(i+1)
        // document.write(`${a}*${b}=${result} `)
        document.write(a + "*" + b + "=" + result + " ")
      }

      document.write("</div>")
    }

  </script>

5_循环控制

循环的跳转（控制）

• 在执行循环过程中, 遇到某一个条件时, 可能想要做一些事情；

• 比如循环体不再执行(即使没有执行完), 跳出循环；

• 比如本次循环体不再执行, 执行下一次的循环体；

循环的跳转控制

• break: 直接跳出循环, 循环结束（break 某一条件满足时，退出循环，不再执行后续重复的代码）

• continue: 跳过本次循环次, 执行下一次循环体

  • continue 指令是 break 的“轻量版”。

  • continue 某一条件满足时，不执行后续重复的代码
    循环结束（break 某一条件满足时，退出循环，不再执行后续重复的代码）

<script>

    // 1.随机生成一个0~99的数字
    var randomNum = Math.floor(Math.random() * 100)
    alert(randomNum)

    // 2.玩家有7次机会猜测数字
    var isSuccess = false
    var count = 3
    for (var i = 0; i < count; i++) {
      // 获取用户的输入
      var inputNum = Number(prompt("请输入您猜测的数字:"))

      // 和randomNum进行比较
      if (inputNum === randomNum) {
        alert("恭喜您, 猜对了")
        isSuccess = true
        break
      } else if (inputNum > randomNum) {
        alert("您猜大了")
      } else {
        alert("您猜小了")
      }

      if (i === count - 1) {
        alert("您的次数已经用完了")
      }
    }

  </script>