JavaScript基础之五JavaScript分支语句

1. JavaScrip分支语句

1.0 程序的执行顺序

• 在程序开发中，程序有三种不同的执行方式：
  • 顺序 —— 从上向下，顺序执行代码
  • 分支 —— 根据条件判断，决定执行代码的 分支
  • 循环 —— 让 特定代码 重复 执行

1.1 代码块的理解

• 代码块是多行执行代码的集合，通过一个 花括号{} 放到了一起。代码块默认的情况也会执行，因此需要用分支语句控制是否执行
  • 在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中
• 在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：
  • 通常会通过一些关键字来告知js引擎代码要如何被执行；
  • 比如分支语句、循环语句对应的关键字等；

1.2 生活中的条件判断

• 现实生活中有很多情况, 我们要根据条件来做一些决定:
  • 小明妈妈说: 如果小明考试了100分, 就去游乐场（判断分数等于100分）
  • 网吧禁止未成年人入内（判断年龄大于等于18岁，是否带身份证，是否带钱）
  • 开发中，登录成功：账号和密码正确 或 扫描二维码成功

1.3 什么是分支结构

• 程序是生活的一种抽象, 只是我们用代码表示了出来
  • 在开发中, 我们经常需要根据一定的条件, 来决定代码的执行方向
  • 如果 条件满足，才能做某件事情
  • 如果 条件不满足，就做另外一件事情
• 分支结构
  • 分支结构的代码就是让我们根据条件来决定代码的执行
  • 分支结构的语句被称为判断结构或者选择结构.
  • 几乎所有的编程语言都有分支结构（C、C++、OC、JavaScript等等）
• JavaScript中常见的分支结构有：
  • if分支结构
  • switch分支结构

1.4 if分支语句

• if分支结构有三种：

• 单分支结构

  • if…

• 多分支结构

  • if…else…
  • if…else if…else…

1.5 单分支结构

• 单分支语句：if

  • if(…) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块。

• 案例一: 如果小明考试超过90分, 就去游乐场

  • “如果”相当于JavaScript中的关键字if
  • 分数超过90分是一个条件(可以使用 > 符号)

• 案例二：单位5元/斤的苹果，如果购买超过5斤，那么立减8元

  • 注意：这里我们让用户输入购买的重量，计算出最后的价格并且弹出结果

  <script>
    // 案例一: 如果小明考试超过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)
    // 案例三: 播放列表中 currentIndex
    // ["鼓楼", "理想", "阿刁"]
    var currentIndex = 2
    // 对currentIndex++完操作之后
    currentIndex++
    if (currentIndex === 3) {
      currentIndex = 0
    }
  </script>

1.6 if语句的细节补充

• 补充一：如果代码块中只有一行代码，那么{}可以省略，但是不建议：
• 补充二：if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）。
  • 转换规则和Boolean函数的规则一致；
  • 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。
    • 因为它们被称为“假值（falsy）”；
  • 其他值被转换为 true，所以它们被称为“真值（truthy）”；

  <script>
    // 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略
    // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
    // 定义一些变量保存数据
    var price = 5
    var weight = 7
    var totalPrice = price * weight
    // 2.根据购买的重量, 决定是否 -8
    if (weight > 5) totalPrice -= 8
   
    console.log("总价格:", totalPrice)
    // 补充二: if (条件判断)
    var num = 123 // true
    if (num) {
      console.log("num判断的代码执行")
    }
  </script>

1.7 多分支语句 if…else…

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

  <script>
    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)
  </script>

1.8 多分支结构 if … else if … else …

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

  <script>
    // 案例: 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("不及格!!!")
    }
  </script>

1.9 三元运算符

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

  <script>
    // 案例一: 比较两个数字
    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)
  </script>

1.10 认识逻辑运算符

• 逻辑运算符，主要是由三个：
  • ||（或），&&（与），!（非）
  • 它可以将多个表达式或者值放到一起来获取到一个最终的结果；
• 有了逻辑运算符，我们就可以在判断语句中编写多个条件。

  <script>
    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("正常的访问页面")
  </script>

1.11 逻辑或的本质

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

 <script>
    // 脱离分支语句, 单独使用逻辑或
    /*
      1.先将运算元转成Boolean类型
      2.对转成的boolean类型进行判断
        * 如果为true, 直接将结果(原始值)返回
        * 如果为false, 进行第二个运算元的判断
        * 以此类推
      3.如果找到最后, 也没有找到, 那么返回最后一个运算元
    */
    // var name = "why"
    // name || 运算元2 || 运算元3
    // 本质推导一: 之前的多条件是如何进行判断的
    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 || "我是默认值"
    console.log(message,message.length)
  </script>

1.12 逻辑与的本质

• &&（或）两个竖线符号表示“与”运算符（也称为短路与）：
  • 从左到右依次计算操作数。
  • 在处理每一个操作数时，都将其转化为布尔值（Boolean）；
  • 如果结果是 false，就停止计算，并返回这个操作数的初始值（一般不需要获取到初始值）；
  • 如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数。
• 换句话说，与运算 返回第一个假值，如果没有假值就返回最后一个值。

  <script>
    // 运算元1 && 运算元2 && 运算元3
    /*
      也可以脱离条件判断来使用
      逻辑与的本质
       1.拿到第一个运算元, 将运算元转成Boolean类型
       2.对运算元的Boolean类型进行判断
         * 如果false, 返回运算元(原始值)
         * 如果true, 查找下一个继续来运算
         * 以此类推
       3.如果查找了所有的都为true, 那么返回最后一个运算元(原始值)
    */
    // 本质推导一: 逻辑与, 称之为短路与
    var chineseScore = 80
    var mathScore = 99
    if (chineseScore > 90 && mathScore > 90) {}
    // 本质推导二: 对一些对象中的方法进行有值判断
    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()
  </script>

1.13 ！（非）

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

  <script>
    var message = "Hello World"
    console.log(Boolean(message))
    console.log(!!message)
    var obj = null
    console.log(Boolean(obj))
    console.log(!!obj)
  </script>

1.14 switch语句

• switch是分支结构的一种语句：
  • 它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的；
• 与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断；
• switch的语法：
  • switch 语句有至少一个 case 代码块和一个可选的 default 代码块。

1.15 switch 语句的补充

• case穿透问题：
  • 一条case语句结束后，会自动执行下一个case的语句；
  • 这种现象被称之为case穿透；
• break关键字
  • 通过在每个case的代码块后添加break关键字来解决这个问题；
• 注意事项：这里的相等是严格相等。
  • 被比较的值必须是相同的类型才能进行匹配。

  <script>
    // 语法
    // 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
    }
  </script>