JavaScript之分支语句与逻辑运算符 (五)：if分支语句、if分支语句、if..else if..else..语句、三元运算符、逻辑运算符、switch语句

1. 了解程序的基本概念

1.1 程序的执行顺序

首先，我们需要了解一个程序的执行流程，在程序开发中，程序有三种不同的执行方式：

1. 顺序执行：从上向下，一步一步顺序执行每一行代码
2. 分支执行：根据条件判断，决定执行代码的分支
3. 循环执行：让特定代码重复执行

    // 1.顺序执行
    var num1 = 10
    var num2 = 20

    var result = num1 + num2
    var result2 = num1 * num2

    // 2.分支语句
    var isLogin = true
    if (isLogin) {
      console.log("访问购物车")
      console.log("访问个人中心")
    } else { 
      console.log("跳转到登录页面")
    }

    // 3.循环语句
    var i = 0;
    while (i < 10) {
      console.log("执行循环语句")
      i++
    }

1.2 程序的代码块

• 代码块：代码块是多行执行代码的集合，通过一个花括号{}放到了一起。一般我们要完成一个特定功能，它需要我们编写多行代码来完成时，我们就会将这些代码放到一个代码块中

  // 一个代码块
    {
      var num1 = 10
      var num2 = 20
      var result = num1 + num2
    }

    // 一个对象
    var info = {
      name: "why",
      age: 18
    }

备注：之后学习流程控制语句后，我们可以使用它们来决定如何执行一个代码块，比如分支语句、循环语句对应的关键字等

2. 分支语句

2.1 什么是分支结构？

程序就像是我们生活的一种抽象：

1. 在现实生活中，我们需要根据条件来做一些决定，例如 月薪过万才能买得起奢侈品，考试满分才能打游戏。
2. 在开发中，我们经常需要根据一定的条件, 来决定代码的执行方向，如果条件满足，才能做某件事情,条件不满足，就做另外一件事情

• 分支结构：能帮助我们在代码中根据条件来决定代码的执行,并且分支结构的语句被称为判断结构或者选择结构.

• JavaScript中常见的分支结构有：

  1. if分支结构
  2. switch分支结构

• if 分支语句有两种:

  1. 单分支结构： if
  2. 多分支结构：if……else、if……else if……else

2.2 if 分支语句

• 单分支语句 if 的执行：if(…) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块
  
• 案例练习：如果小明考试超过90分, 就去游乐场

// 案例一: 如果小明考试超过90分, 就可以去游乐场
    // 1.定义一个变量来保存小明的分数
    var score = 99

    // 2.如果分数超过90分, 去游乐场
    if (score > 90) {
      console.log("去游乐场玩~")
    }


    // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
    // 1.定义一些变量保存数据
    var price = 5
    var weight = 7
    var totalPrice = price * weight

    // 2.根据购买的重量, 决定是否 -8
    if (weight > 5) {
      totalPrice -= 8
    }

    console.log("总价格:", totalPrice)

2.2.1 单分支 if语句补充

1. 如果代码块中只有一行代码，那么{}可以省略：

    if (weight > 5) totalPrice -= 8
   

2. if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）

备注：括号内的表达式 转换规则和Boolean函数的规则一致：

1. 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false ，它们被称为“假值（falsy）”；
2. 其他值被转换为 true，所以它们被称为“真值（truthy）

2.3 if…else…语句

• 多分支语句 if…else… 的执行：在if语句后有时会包含一个可选的 “else” 块。关键词后跟着一个{}代码块，如果if的条件判断不成立，就会执行else后的语句。
  
• 案例练习：

  var score = 80
    // 条件成立, 专属的代码块
    // 条件不成立, 专属的代码块
    // if (score > 90) {
    //   console.log("去游乐场玩~")
    // } else {
    //   console.log("哈哈哈哈")
    // }

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

    // 案例二: 有两个数字, 进行比较, 获取较大的数字
    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)

2.4 if…else if…else…语句

• 多分支 if…else if…else… 的执行：有时我们需要判断多个条件，我们可以通过使用 else if 子句实现
  
• 案例练习：分数评级

 // 案例: score评级
    // 1.获取用户输入的分数
    var score = prompt("请输入您的分数:")
    score = Number(score)

    // 2.判断等级
    // 使用if else的方式来实现
    // if (score > 90) {
    //   alert("您的评级是优秀!")
    // } else {
    //   if (score > 80) {
    //     alert("您的评级是良好!")
    //   } else {
    //   }
    // }
    
    // edge case
    // if (score > 100 || score < 0) {
    //   alert("您输入的分数超过了正常范围")
    // } 
    
    if (score > 90) {
      alert("您的评级是优秀!")
    } else if (score > 80) {
      alert("您的评级是良好!")
    } else if (score >= 60) {
      alert("您的评级是合格!")
    } else {
      alert("不及格!!!")
    }

2.5 switch语句

• 多分支 switch 语句的执行：switch也是分支语，它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的
  

• switch与if语句的区别：与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断

• switch 语法使用：首先我们要记住几个关键词 switch、case、break、default，下面在介绍如何使用。

  1. switch 语句有至少一个 case 代码块和一个可选的 default 代码块
  2. break表示结束switch分支判断，常放在case下语句的末尾，表示判断结束。如果不写break会一直执行下面case后的语句，直到执行结束或再次遇到break。
     

    // 语法
    // switch (表达式/变量) {
    //   case 常量1:
    //     // 语句
    // }


    // 案例:
    // 上一首的按钮: 0
    // 播放/暂停的按钮: 1
    // 下一首的按钮: 2
    // var btnIndex = 100
    // if (btnIndex === 0) {
    //   console.log("点击了上一首")
    // } else if (btnIndex === 1) {
    //   console.log("点击了播放/暂停")
    // } else if (btnIndex === 2) {
    //   console.log("点击了下一首")
    // } else {
    //   console.log("当前按钮的索引有问题~")
    // }

    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
    }

2.5.1 switch的补充

在使用switch时，我们需要明白下面几点：

1. switch后的括号中表达式的值与case 后的值进行比较时 是严格相等，被比较的值必须是相同的类型才能进行匹配
2. case穿透问题：在介绍switch语句时也提到过，一条case语句结束后，会自动执行下一个case的语句
3. break关键字：我们通过在每个case的代码块后添加break关键字来解决case穿透问题。之后在学习循环时也会使用到。

3. 三元运算符

• 三元运算符：在进行简单的条件判断时使用 if判断会比较臃肿，因此我们可以使用三元运算符来简化这段语句，

• 条件运算符 ？：这个运算符通过问号 ? 表示，该运算符中有三个操作数（运算元），因此它被称为三元运算符。它是 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)

4. 逻辑运算符

4.1 认识逻辑运算符

逻辑运算符，主要是有三个：

它可以将多个表达式或者值放到一起来获取到一个最终的结果, 有了逻辑运算符，我们就可以在判断语句中编写多个条件

• 逻辑运算符的基本使用：逻辑运算符常搭配条件判断语句进行使用

    var chineseScore = 88
    var mathScore = 99

    // 1.逻辑与: &&, 并且
    // 条件1 && 条件2 && 条件3.....
    // 所有的条件都为true的时候, 最终结果才为true
    // 案例: 小明语文考试90分以上, 并且数学考试90分以上, 才能去游乐场
    if (chineseScore > 90 && mathScore > 90) {
      console.log("去游乐场玩~")
    }

    // 2.逻辑或: ||, 或者
    // 条件1 || 条件2 || 条件3....
    // 只要有一个条件为true, 最终结果就为true
    // 案例: 如果有一门成绩大于90, 那么可以吃打1小时游戏
    if (chineseScore > 90 || mathScore > 90) {
      console.log("打1个小时游戏~")
    }

    // 3.逻辑非: !, 取反
    var isLogin = true
    if (!isLogin) {
      console.log("跳转到登录页面")
      console.log("进行登录~")
    }

    console.log("正常的访问页面")

4.2 逻辑或 || 的本质

• 逻辑或 ||：||（或）两个竖线符号表示“或”运算符（也称为短路或），“短路”的含义即一旦其中一个操作数的结果能导致最后的结果，那么就不会对之后的操作数进行判断。

• 当我们脱离分支语句，单独使用 逻辑或：一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值

• 执行的本质：

  1. 运算符在对每一个操作数进行判断时都会先将运算元转成Boolean类型
  2. 对转成的boolean类型进行判断
     • 如果为true, 直接将结果(原始值)返回
     • 如果为false,进行第二个运算元的判断
     • 以此类推
  3. 如果所有的运算元计算后的值都为false那么返回最后一个运算元

注意：返回的值是操作数的初始形式，不会转换为Boolean类型

逻辑或 也常用于 获取第一个有值的结果

// 本质推导一: 之前的多条件是如何进行判断的
    var chineseScore = 95
    var mathScore = 99
    // chineseScore > 90为true, 那么后续的条件都不会进行判断
    if (chineseScore > 90 || mathScore > 90) { }

    // 本质推导二: 获取第一个有值的结果
    var info = "abc"
    var obj = { name: "why" }
    var message = info || obj.name || "我是默认值"
    console.log(message.length)

4.3 逻辑与 && 的本质

• 逻辑与 &&：&& 表示“与”运算符（也称为短路与）

• 当我们脱离分支语句，单独使用 逻辑与：与运算 返回第一个假值，如果没有假值就返回最后一个值。

• 执行的本质

  1. 运算符在对每一个操作数进行判断时都会先将运算元转成Boolean类型
  2. 对转成的boolean类型进行判断
     • 如果为true, 进行第二个运算元的判断
     • 如果为false,直接将结果(原始值)返回
     • 以此类推
  3. 如果所有的运算元计算后的值都为true那么返回最后一个运算元

注意：返回的值是操作数的初始形式，不会转换为Boolean类型

逻辑与 也常用于 对一些对象中的方法进行有值判断

// 本质推导二: 对一些对象中的方法进行有值判断
    var obj = {
      name: "why",
      friend: {
        name: "kobe",
        eating: function() {
          console.log("eat something")
        }
      }
    }

    // 调用eating函数
    // obj.friend.eating()
    obj && obj.friend && obj.friend.eating && obj.friend.eating()

4.4 逻辑非 ! 的补充

• 逻辑非 !: 用于一个数据的布尔值的取反操作

• 执行的本质：

  1. 将操作数转化为布尔类型：true/false
  2. 返回相反的值

• 两个逻辑非 !! 也常用于用来将某个值转化为布尔类型

	var message = "Hello World"
    console.log(Boolean(message))	// true
    console.log(!!message) // true


    var obj = null
    console.log(Boolean(obj)) // false
    console.log(!!obj) // false