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

最新推荐文章于 2024-07-21 10:17:51 发布

疆子

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量422

点赞数

分类专栏：前端知识点总结文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/jiang_ziY/article/details/123057790

版权

前端知识点总结专栏收录该内容

31 篇文章 10 订阅

订阅专栏

接上章:

流程控制语句

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) 遍历指定范围的数
- (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) 声明变量存储结果
- (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) 声明变量存储结果
  - 求最大值 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}`)
            }
          }
        }
      }