JavaScript内容回顾第三天

最新推荐文章于 2024-07-17 15:26:15 发布

coderyhh

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量114

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/javacguxue/article/details/127904951

版权

内容回顾

一. 分支语句

1.1. if…else…

多分支语句一： if… else…
- if 语句有时会包含一个可选的 “else” 块。
- 如果判断条件不成立，就会执行它内部的代码。

案例一：如果分数超过90分去游乐场，否则去上补习班

满足条件时，做某些事情
不满足（else），去做另外一些事情

// 案例一: 小明超过90分去游乐场, 否则去上补习班
    if (score > 90) {
      console.log("去游乐场玩~")
    } else {
      console.log("去上补习班~")
    }

案例二：m=20，n=30，比较两个数字的大小，获取较大的那个数字

// 案例二: 有两个数字, 进行比较, 获取较大的数字
    var num1 = 12*6 + 7*8 + 7**4
    var num2 = 67*5 + 24**2
    console.log(num1, num2)

    var result = 0
    if (num1 > num2) {  
      result = num1
    } else {
      result = num2
    }
    console.log(result)

1.2. if…else if…else

多分支结构： if… else if… else…
- 有时我们需要判断多个条件；
- 我们可以通过使用 else if 子句实现；

案例: 分数评级：

考试分数大于90：优秀
大于80小于等于90：良好
大于60小于等于80：合格
小于60分：不及格

  if (score > 90) {
      alert("您的评级是优秀!")
    } else if (score > 80) {
      alert("您的评级是良好!")
    } else if (score >= 60) {
      alert("您的评级是合格!")
    } else {
      alert("不及格!!!")
    }

1.3. 三元运算符

condition ? value1: value2;

有时我们需要根据一个条件去赋值一个变量。
比如比较数字大小的时候，获取较大的数字；
这个时候if else语句就会显得过于臃肿，有没有更加简介的方法呢？
条件运算符：****’?’
- 这个运算符通过问号 ? 表示；
- 有时它被称为三元运算符，被称为“三元”是因为该运算符中有三个操作数（运算元）；
- 实际上它是 JavaScript 中唯一一个有这么多操作数的运算符；
使用格式如下


    // 案例一: 比较两个数字
    var num1 = 12*6 + 7*8 + 7**4
    var num2 = 67*5 + 24**2

    // 三元运算符
    var result = num1 > num2 ? num1: num2
    console.log(result)

    // 案例二: 给变量赋值一个默认值(了解)
    var info = {
      name: "why"
    }
    var obj = info ? info: {}
    console.log(obj)

    // 案例三: 让用户输入一个年龄, 判断是否成年人
    var age = prompt("请输入您的年龄:")
    age = Number(age)
    // if (age >= 18) {
    //   alert("成年人")
    // } else {
    //   alert("未成年人")
    // }
    var message = age >= 18 ? "成年人": "未成年人"
    alert(message)

1.4. 逻辑运算符

1.4.1. 逻辑运算符的基本使用

逻辑运算符，主要是由三个：
- ||（或），&&（与），!（非）
- 它可以将多个表达式或者值放到一起来获取到一个最终的结果；
- 有了逻辑运算符，我们就可以在判断语句中编写多个条件。
```
运算符 运算规则 范例 结果
&& 与: 同时为真 false && True false
|| 或: 一个为真 false or frue true
! 非: 取反 !false true
```

1.4.2. 逻辑或的本质

**||（或）**两个竖线符号表示“或”运算符（也称为短路或）：
- 从左到右依次计算操作数。
- 处理每一个操作数时，都将其转化为布尔值（Boolean）；
- 如果结果是 true，就停止计算，返回这个操作数的初始值。
- 如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数。
注意：返回的值是操作数的初始形式，不会转换为Boolean类型。
换句话说，一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。

var result = name || info || "默认值"

1.4.3. 逻辑与的本质

**&&（与）**两个竖线符号表示“与”运算符（也称为短路与）：

从左到右依次计算操作数。
在处理每一个操作数时，都将其转化为布尔值（Boolean）；
如果结果是 false，就停止计算，并返回这个操作数的初始值（一般不需要获取到初始值）；
如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数。

**换句话说，**与运算 返回第一个假值，如果没有假值就返回最后一个值

info && info.friend && info.friend.eating && info.friend.eating()

1.4.4. 逻辑非的补充

!!message

逻辑非运算符接受一个参数，并按如下运算：
- 步骤一：将操作数转化为布尔类型：true/false；
步骤二：返回相反的值；
两个非运算 !! 有时候用来将某个值转化为布尔类型：
- 也就是，第一个非运算将该值转化为布尔类型并取反，第二个非运算再次取反。
- 最后我们就得到了一个任意值到布尔值的转化。

1.5. switch语句

基本使用
switch是分支结构的一种语句：
- 它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的；
与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断；

switch的语法：
switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

 var btnIndex = 0
    switch (btnIndex) {
      case 0:
        console.log("点击了上一首")
        break
      case 1:
        console.log("点击了播放/暂停")
        // 默认情况下是有case穿透
        break
      case 2:
        console.log("点击了下一首停")
        break
      default:
        console.log("当前按钮的索引有问题~")
        break
    }

case穿透问题：
- 一条case语句结束后，会自动执行下一个case的语句；
- 这种现象被称之为case穿透；

break关键字
- 通过在每个case的代码块后添加break关键字来解决这个问题；

注意事项：这里的相等是严格相等。
- 被比较的值必须是相同的类型才能进行匹配。

二. 循环语句

2.1. 认识循环结构

在开发中我们经常需要做各种各样的循环操作：
- 比如把一个列表中的商品、歌曲、视频依次输出进行展示；
- 比如对一个列表进行累加计算；
- 比如运行相同的代码将数字 1 到 10 逐个输出；
循环是一种重复运行同一代码的方法。
- 如果是对某一个列表进行循环操作，我们通常也会称之为遍历（traversal）或者迭代（iteration）；
在JavaScript中支持三种循环方式：
- while循环；
- do…while循环；
- for循环；

2.2. while循环

while循环的语法如下：
- 当条件成立时，执行代码块；
- 当条件不成立时，跳出代码块；
- ```
while(循环条件) {
    // 代码块
}
```

如果条件一直成立（为true），那么会产生死循环。

这个时候必须通过关闭页面来停止死循环；
开发中一定要避免死循环的产生；

  // 死循环
    while (true) {
      console.log("Hello World")
      console.log("Hello Coderwhy")
    }


 // 1.练习一: 打印10次Hello World
     var count = 0
     while (count < 10) {
     console.log("Hello World:", count)
      count++ // 10
  	 }

    // 2.练习二: 打印0~99的数字
     var count = 0
     while (count < 100) {
       console.log(count)
       count++
     }

    // 3.练习三: 计算0~99的数字和
     var count = 0
     var totalCount = 0
     while (count < 100) {
       totalCount += count
       count++
     }
     console.log("totalCount:", totalCount)

    // 4.练习四: 计算0~99的奇数和
    // 如何判断一个数字是奇数还是偶数
     var num = 120
     if (num % 2 !== 0) { // 奇数
       console.log("num是一个奇数")
     }
     var count = 0
     var totalCount = 0
     while (count < 100) {
       if (count % 2 !== 0) {
         totalCount += count
       }
       count++
     }

     console.log("所有的奇数和:", totalCount)


    // 5.练习五: 计算0~99的偶数和
    var count = 0
    var totalCount = 0
    while (count < 100) {
      if (count % 2 === 0) {
        totalCount += count
      }
      count++
    }

    console.log("所有的偶数和:", totalCount)

    // 算法优化
    var count = 0
    var totalCount = 0
    while (count < 100) {
      totalCount += count
      count += 2
    }

    console.log("所有的偶数和:", totalCount)

2.3. do…while循环

do…while循环和while循环非常像，二者经常可以相互替代**(不常用)**
- 但是do…while的特点是不管条件成不成立，do循环体都会先执行一次；
通常我们更倾向于使用while循环。

// 练习一: 打印10次Hello World
    var count = 0
    do {
      console.log("Hello World")
      count++
    } while (count < 10)

    // 练习二: 计算0~99的数字和
    var count = 0
    var totalCount = 0
    do {
      totalCount += count
      count++
    } while (count < 100)
    console.log("totalCount:", totalCount)

2.4. for循环

**for 循环更加复杂，但它是最常使用的循环形式。

 /*
      1.首先, 会先执行var count = 0;
      2.根据条件执行代码
        * count < 3
        * alert(count) // 0 1 2
        * count++
    */
    for (var count = 0; count < 3; count++) {
      alert(count)
    }

语句段 例子 执行过程
begin let i = 0 进入循环时执行一次。
condition i < 3 在每次循环迭代之前检查，如果为 false，停止循环。
body（循环体） alert(i) 条件为真时，重复运行。
step i++ 在每次循环体迭代后执行。

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

2.5. for循环的嵌套

  for (var i = 0; i < 9; i++) {
      document.write("<div>")
      
      for (var m = 0; m < 10; m++) {
        document.write("❤ ")
      }

      document.write("</div>")
    }

for (var i = 0; i < 6; i++) {
      document.write("<div>")
      
      for (var m = 0; m < i+1; m++) {
        document.write("❤ ")
      }

      document.write("</div>")
    }

 for (var i = 0; i < 9; i++) {
      document.write("<div>")
      
      for (var m = 0; m < i+1; m++) {
        var a = m + 1
        var b = i + 1
        var result = (m+1)*(i+1)
        // document.write(`${a}*${b}=${result} `)
        document.write(a + "*" + b + "=" + result + " ")
      }

      document.write("</div>")
    }

2.6. 循环的控制

循环的跳转（控制）：
- 在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情；
- 比如循环体不再执行(即使没有执行完), 跳出循环；
- 比如本次循环体不再执行, 执行下一次的循环体；
循环的跳转控制
- break: 直接跳出循环, 循环结束
- break 某一条件满足时，退出循环，不再执行后续重复的代码

continue: 跳过本次循环次, 执行下一次循环体

continue 指令是 break 的“轻量版”。
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])

2.7. 猜数字游戏

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