JavaScript之循环语句 (六)：认识循环语句、while 循环、do……while 循环、 for 循环、 break与continue关键字

1. 认识循环

• 什么是循环： 循环是指重复做同一件事情， 而在开发中指一种重复运行统一代码的方法。在开发中，我们经常需要进行各种循环操作，比如运行相同的代码将数字 1 到 10 逐个输出，或者一个范围内数字的累加等等。
  • 遍历（traversal）/ 迭代（iteration）：如果我们对数组中进行循环元素等操作，这种操作我们称之为遍历或迭代。

  // 实现一个代码块重复执行
    {
      console.log("hello")
    }

JavaScript中支持的三种循环：
1. while循环
2. do……while循环
3. for循环

下面主要介绍三种训话的语法，已经执行流程，然后做一点小练习巩固一下。

2. while 循环

• while循环的语法与执行流程：
  1. 当条件成立时，执行代码块
  2. 当条件不成立时，跳出代码块
  3. 如果条件一直为true，那么会进入死循环，导致浏览器卡死
     

    // 语法：
    // while (循环条件) {
    //   循环语句
    //   console.log("hello")
    // }

    // 死循环，会导致浏览器卡死
    // while (true) {
    //   console.log("hello world")
    // }

    // 练习1：打印10次hello world
    // let count = 0
    // while (count < 10) {
    //   count++
    //   console.log("Hello Wrold! " + count)

    // }

    // 练习2：打印0-99的数字
    // let num = 0
    // while (num < 100) {
    //   console.log(num)
    //   num++
    // }

    // 练习3：计算0-99的数字和
    // let num = 0, sum = 0
    // while (num < 100) {
    //   console.log(num)
    //   sum += num
    //   num++
    // }
    // console.log("和为" + sum)
    // 练习4：计算0-99的奇数和
    // let num = 0, sum = 0
    // while (num < 100) {
    //   if (num % 2 !== 0) {
    //     console.log(num)
    //     sum += num
    //   }
    //   num++
    // }
    // console.log("奇数和为：" + sum)

    // 练习5：计算0-99的偶数和
    // let num = 0, sum = 0
    // while (num < 100) {
    //   if (num % 2 === 0) {
    //     console.log(num)
    //     sum += num
    //   }
    //   num++
    // }
    // console.log("偶数和为：" + sum)

    // 算法优化
    let num = 0, sum = 0
    while (num < 100) {
      if (num % 2 === 0) {
        console.log(num)
        sum += num
      }
      // 减少遍历次数
      num += 2
    }
    console.log("偶数和为：" + sum)

3. do……while 循环（不常用）

• do……while循环的语法与执行流程：
  1. do..while的特点:不管条件成不成立，do循环体都会先执行一次；
  2. 当条件成立时，继续执行代码块
  3. 当条件不成立时，跳出代码块

    // do while 循环
    // do{

    // }while(条件判断)

    // 练习1：打印10次hello world
    // let i = 0
    // do {
    //   console.log("hello world")
    //   i++
    // } while (i < 10)
    // 练习2：打印0-100的和
    let i = 0, sum = 0
    do {
      sum += i
      i++
    } while (i <= 100)
    console.log("和为" + sum)

4. for 循环 与 循环嵌套（重要）

4.1 for循环的基本使用

• for循环时最常用的循环形式，它的语法结构与执行流程如下：
  1. for循环首先会进行迭代变量的声明与初始化
  2. 然后判断循环条件表达式
  3. 表达式成立，进入循环代码块执行
  4. 执行结束后，会修改迭代变量的值
  5. 再次判断修改后的值是否满足条件表达式
  6. 以此类推，最后不满足后退出循环

总结： begin 执行一次，然后进行迭代，每次检查 condition 后，执行 body 和 step。

// for 循环
    // for (beigin; condition; step) {

    // }
    // 练习
    for (var count = 0; count < 10; count++) {
      console.log("hello world")
    }

    for (var count = 0; count < 100; count++) {
      console.log(count)
    }

    let sum = 0
    for (var count = 0; count < 100; count++) {
      sum += count
    }
    console.log(`和为${sum}`)

    let sum02 = 0
    for (var count = 1; count < 100; count += 2) {
      if (count % 2 !== 0) {
        sum02 += count
      }
    }
    console.log(`奇数和为${sum02}`)

    let sum03 = 0
    for (var count = 0; count < 100; count += 2) {
      if (count % 2 === 0) {
        sum03 += count
      }
    }
    console.log(`偶数和为${sum03}`)

4.2 for循环的循环嵌套

其实，for循环的嵌套最重要的还是要清楚循环的执行流程，外层for循环在每次循环过程中要把内部的for循环全部都从头到尾遍历一遍。

• 练习1：打印10行6列的爱心
  

 for (var i = 0; i < 10; i++) {
      for (var j = 0; j < 6; j++) {
        document.write(`❤`)
      }
      document.write(`
`)
    }

• 练习2：打印行数等于每行个数的爱心
  

for (let i = 0; i < 6; i++) {
      document.write(`
`)
      for (let j = 0; j <= i; j++) {
        document.write(`❤`)
      }
      document.write(``)
    }

• 练习3：九九乘法表
  

table {
      text-align: center;
      border-collapse: collapse;
    }

    td {
      padding: 5px 10px;
      border: 1px solid #333;
    }

 document.write(``)for(var i =1; i <10; i++){
      document.write(``)for(var j =1; j < i +1; j++){
        document.write(``)}
      document.write(``)}
    document.write(`

        

          
${j} × ${i} = ${j * i}
      
    `)

5. 循环控制 break&continue 关键字

循环的跳转（控制）： 在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情,比如跳出整个循环，或者跳过当前次数的循环

循环控制的关键字：

1. break：直接跳出循环, 循环结束，不在执行后续重复的代码
2. continue：跳过本次循环轮次,不执行本次循环代码， 执行下一轮循环。

var names = ["abc", "cba", "nba", "mba", "bba", "aaa", "bbb"]
    
    // 循环遍历数组
    // break关键字的使用
    // 需求: 遇到nba时, 不再执行后续的迭代
    // for (var i = 0; i < 4; i++) {
    //   console.log(names[i])
    //   if (names[i] === "nba") {
    //     break
    //   }
    // }

    // continue关键字的使用: 立刻结束本次循环, 执行下一次循环(step)
    // 需求: 不打印nba
    for (var i = 0; i < 7; i++) {
      if (names[i] === "nba" || names[i] === "cba") {
        continue
      }
      console.log(names[i])
    }

6. 综合案例练习 猜数字游戏

• 案例中的知识补充

  • Math.random()：随机生成[0,1)的数字
  • Math.floor()：向下取整

  	 // Math.random(): [0, 1)
      for (var i = 0; i < 1000; i++) {
        var randomNum = Math.random() * 100 // 99
        randomNum = Math.floor(randomNum)
        console.log(randomNum)
      }
  
      // 生成一个0~99的随机数
      var randomNum = Math.floor(Math.random() * 100)
  
  

• 案例代码

// 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("您的次数已经用完了")
      }
    }

    // if (!isSuccess) {
    //   alert("您的机会用完了~")
    // }