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

跳转目录🚀

篇章	知识点
JavaScript之邂逅 (一)	认识编程语言及其历史、JS的历史、JS的分类、JS运行引擎、JS应用场景
JavaScript之基本语法 (二)	JS的编写方式、noscript元素的使用、JS的注意事项、JS交互方式、JS语句和分号、JS注释方式
JavaScript之变量与数据类型 (三)	认识JavaScript变量、变量的定义和规范、数据类型和typeof、常见的数据类型、数据类型的转换
JavaScript之常见的运算符 (四)	运算符和运算元、算数运算符、赋值运算符、自增和自减、比较运算符、运算符优先级
JavaScript之分支语句与逻辑运算符 (五)	if分支语句、if分支语句、if…else if…else…语句、三元运算符、逻辑运算符、switch语句
JavaScript之循环语句 (六)	认识循环语句、while 循环、do……while 循环、 for 循环、 break与continue关键字
JavaScript之函数 (七)	认识JavaScript函数、函数的声明和调用、函数的递归调用、局部和全局变量、函数表达式的写法、立即执行函数使用
JavaScript对象 (八)	对象类型的使用、值类型和引用类型、函数的this指向、工厂方法创建对象、构造函数和类、new创建对象
JavaScript之常见内置类 (九)	认识包装类型、数字类型Number、数学类型Math、字符串类型String、数组Array使用详解、Date类型的使用

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(`</br>`)
    }

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

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

• 练习3：九九乘法表
  

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

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

 document.write(`<table>`)
    for (var i = 1; i < 10; i++) {
      document.write(`<tr>`)
      for (var j = 1; j < i + 1; j++) {
        document.write(`<td>${j} × ${i} = ${j * i}</td>`)
      }
      document.write(`</tr>`)
    }
    document.write(`</table>`)

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("您的机会用完了~")
    // }