接上章:

流程控制语句

3.循环结构

作用 : 代码重复执行

1. while 循环

• 语法 : while(条件 true/false ){循环体:需要重复执行的代码}
• 执行规则 :
  • 步骤(1) 判断条件是否成立
    • (1.1) 条件成立执行循环体代码
    • (1.2) 条件不成立:循环结束.执行循环后面的代码.
  • 步骤(2) 重复以上 步骤(1)
  • 注意点 : 循环条件可以是
    • a. 关系表达式,值一定是布尔值.
    • b. 布尔类型的值
    • c. 其他值,编译器会自动转换成布尔类型的值进行计算
• 代码举例详解 ：

/* 需求：打印三次  【前端知识点总结】JavaScript 基础三 */

      //复制粘贴弊端：（1）代码冗余  （2）维护不便
      //   console.log('【前端知识点总结】JavaScript 基础三')
      //   console.log('【前端知识点总结】JavaScript 基础三')
      //   console.log('【前端知识点总结】JavaScript 基础三')

      //(1)声明一个变量记录循环次数 : 循环变量
      let num = 1  
      //(2)循环条件：控制循环执行的条件      
      while (num<=3) {
        console.log('【前端知识点总结】JavaScript 基础三')
        //(3)循环变量自增
        num++
      }

      console.log('【前端知识点总结】JavaScript 基础三学完了')

2. for 循环

• 语法 : for((语句1 :声明循环变量) ; (语句2:循环条件) ; (语句3: 循环变量自增)){循环体}
• 执行规则 :
  • 步骤(1) 执行 语句1
  • 步骤(2) 判断 语句2 是否成立
    • (2.1)条件成立执行循环体代码,循环体结束,执行语句3
    • (2.2)条件不成立:循环结束.执行循环后面的代码.
  • 步骤(3) 重复 步骤(2)

/* 需求：打印三次  【前端知识点总结】JavaScript 基础三 */
     for (let i = 1; i <= 3; i++) {
        console.log('【前端知识点总结】JavaScript 基础三 ')
      }

循环结构的场景

• for 循环: 循环次数明确的

  1. 找出指定范围复合条件的数:筛选功能
     • (1) 遍历指定范围的数
     • (2) 找出复合条件的数

  • 案例1： 打印100-200之间每一个整数

       for (let i = 100; i <= 200; i++) {
         console.log(i)
       }
    

  • 案例2 : 打印1-100之间可以被7整除的数(求指定范围满足条件的数)

           for (let i = 1; i <= 100; i++) {
       if (i % 7 == 0) {
         console.log(i)
       }
     }
    

  2. 累加求和
     • (1) 声明变量存储结果
     • (2) 遍历数量
     • (3) 累加
  • 案例： 让用户输入5个数字，计算这5个数字的和

           //(1)声明变量存储累加和结果
           let sum1 = 0
           //(2)遍历数量
           for (let i = 1; i <= 5; i++) {
             let num = +prompt(`请输入第${i}数字`)
             console.log(num)
             //(3)累加
             sum1 += num
           }
    

  3. 求最大值/最小值
     • (1) 声明变量存储结果
       • 求最大值 let max = -Infinity
       • 求最小值 let max = Infinity
     • (2) 遍历数量
     • (3) 依次比较大小

  • 案例： 用户输入5个数字，求5个数字最大数

    • 业务场景： 求一组数最大值。例如：微信账单，上个月转账20笔，页面会显示最多的一笔是多少钱

            /*  求最大值思路（擂台思想） */
          //1.声明变量存储结果
          //求最大值：保证第一个数字一定比默认值大，所以默认值给 -Infinity
          let max = -Infinity
          //2.遍历数量
          for (let i = 1; i <= 5; i++) {
            let num = +prompt(`请输入第${i}个数字`)
            //3.依次比较大小
            if (num > max) {
              max = num
            }
          }
          console.log(max)
    
          //求最小值：保证第一个数字一定比默认值小，所以默认值给 Infinity
          let min = Infinity
          //2.遍历数量
          for (let i = 1; i <= 5; i++) {
            let num = +prompt(`请输入第${i}个数字`)
            //3.依次比较大小
            if (num < min) {
                min = num
            }
          }
          console.log(min)
    

• while 循环:循环次数不明确(实际业务中很少使用)

  • 穷举:从小遍历到无穷大,直到找出符合条件的数
    • 人为写一个死循环
    • 找到符合条件的数停止
  • 实例1(穷举) : 有一群人，如果三个人站一排多1个人，如果四个人站一排多2个人，如果五个人站一排多3个人，求这群人共有多少人

        let num = 0
        while (true) {
          //无限循环，不知道走多少次
          num++
          if (num % 3 == 1 && num % 4 == 2 && num % 5 == 3) {
            console.log(num)
            break
          }
        }
  

  • 实例2(猜迷) : 猜谜游戏：（1）生成1-100随机幸运数字 （2）让用户输入数字 ： 猜这个数字，直到猜对为止
    • 猜大了：提示用户猜大了，继续猜
    • 猜小了：提示用户继续猜
    • 猜对了 ： 提示用户猜对的。

        // 1-100随机整数  
         let num = parseInt(Math.random() * 100)
         //(1)人为的写一个死循环  
         while(true){
             let cai = +prompt('请猜出这个幸运数字是多少？')
             if( cai > num ){
                 alert('猜大了继续')
             }else if( cai < num ){
               alert('猜小了继续')
             }else{
                 alert('恭喜你猜对了')
                 //(2)使用break主动结束循环
                 break
             }
         }
  

补充知识点生成随机数

• 生成0-1之间的随机小数 : Math.random()
• 生成0-100之间的随机整数 : parseInt( Math.random() * 100 )

break和continue的区别

• break (使用很多): 结束整个循环语句,立即执行循环后面的代码,break 只对循环和switch-case有效
• continue (很少使用) : 结束本次循环,立即进入下一次循环

      //早上吃10个小笼包，一口一个，吃10次
      for (let i = 1; i <= 10; i++) {
        //break:吃到第五个包子吃饱了，后面的包子都不吃了。整个循环结束，立即执行循环后面的代码
        if (i == 5) {
          break
        }
        //continue:吃到第五个包子，吃到虫子了。第五个包子不吃，但是没吃饱后面包子继续吃。
        //结束本次循环体,立即进入下一次循环判断
        if( i == 5){
            continue
        }
        console.log(`我正在吃第${i}个包子`)
      }
      console.log('我吃完了')

循环嵌套 :

循环内部 嵌套循环

• 实例1 :
  • 需求：每天要记5个单词，坚持记3天

     //循环三天
      for (let i = 1; i <= 3; i++) {//i = 1 2 3
        console.log(`第${i}天开始了`)
        //循环5个单词
        for(let j = 1;j<=5;j++){//j = 1 2 3 4 5
            console.log(`第${j}个单词`)
        }
        console.log(`第${i}天结束了`)
      }

• 实例2 :
  • 需求: 打印 6行星星, 每行依次递增, 最后为三角形结构 ,一次只能一颗
  • 思路分析:
  1. 外层循环：行数 for(let i = 1;i<=6;i++)
  2. 内层循环：列数

      //1.外层循环：行
      for (let i = 1; i <= 6; i++) {
        //2.内层循环：列数 = i的值
        for (let j = 1; j <= i; j++) {
          document.write('☆ ')
        }
        document.write('<br>')
      }

• 实例3 : 九九乘法表
  • 思路分析:
  1. 三角形结构(循环嵌套),外层循环：行数,内层循环：列数
  2. 数字如何变化

      //(1)外层循环：行
      for (let i = 1; i <= 9; i++) {
        //(2)内层循环 = 当前行
        for (let j = 1; j <= i; j++) {
          document.write(`<span> ${j}x${i}=${i*j} </span>`)
        }
        document.write('<br>')
      }

三重循环嵌套(大马驮粮)

• 实例 : 大马驮粮
  • 大马驮2石粮食，中马驮1石粮食，两头小马驮一石粮食，要用100匹马，驮100石粮食，该如何调配？

      for (let i = 0; i <= 50; i++) {
        for (let j = 0; j <= 100; j++) {
          for (let k = 0; k <= 100; k++) {
            if (i + j + k == 100 && i * 2 + j + k * 0.5 == 100) {
              console.log(`大马：${i},中马:${j},小马:${k}`)
            }
          }
        }
      }