Java教程

【前端知识点总结】JavaScript 基础三

本文主要是介绍【前端知识点总结】JavaScript 基础三,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

接上章:

流程控制语句

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)
         }
       }
      
    1. 累加求和
      • (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
             }
      
    1. 求最大值/最小值
      • (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}`)
            }
          }
        }
      }
这篇关于【前端知识点总结】JavaScript 基础三的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!