分支语句

JS 在执行的时候, 是按照 从上往下的顺序执行的

所以我们书写的所有代码都会执行, 区别就是执行顺序的问题

但是上述的执行方案会有一个小问题, 比如我想根据某一个条件决定是否执行一段代码

一个代码案例: 在访问一个页面的时候, 如果页面地址输入的没问题, 并且网络也能够正常访问页面 那么此时一定可以正常访问页面 如果上述的条件有一个不满, 比如说地址输入错误, 或者说网线被扒了 那么此时页面就无法正常的访问了

    此时如果是前端JS处理, 那么应该是这解决的:
        如果条件1和条件2都成立, 那么展示一个正常的页面
        否则, 展示一个错误的页面 (404页面)


所以分支语句的一个核心就是给了我们 基于某一个条件决定执行某一段代码的能力

if 语句

语法1: if (条件) { 书写如果条件成立, 需要执行的代码 }

条件为真 就会执行 大括号内的 代码, 否则 不执行

• ==条件可以直接书写布尔值, 也可以书写一个表达式, 或者一个数字==

• ==只要你书写的不是一个布尔值, 那么会隐式转换为 一个布尔值==

语法2:

if (条件) { 书写如果条件成立, 需要执行的代码 }

else { 当上边的条件不成立的时候, 我会执行, 如果上边的条件成立了, 我就不执行了 }

语法3(不推荐大量使用):

if (条件1) {
    如果条件1成立, 那么我会执行, 同时后续的所有 else if 或者 else 都不会执行了
} 

else if (条件2) {
    如果条件1不成立, 但是条件2成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
} 

else if (条件3) {
    如果条件1和条件2都不成立, 但是条件3成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
} .....

语法4(语法3的一个升级补充):

if (条件1) {
  如果条件1不成立, 但是条件2成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
} 

else if (条件3) {
  如果条件1和条件2都不成立, 但是条件3成立了, 那么我会执行 , 同时后续的所有 else if 或者 else 都不会执行了
} 

else {
   如果上述的所有条件都不成立, 那么我会执行, 否则就不执行
}

注意: if 语句的难点不是如何选择 语法 1 2 3 4 难点是 if 语句 的 条件如何书写

switch 语句

switch 语句,也是 分支语句的一种

主要用于某一个变量的具体值, 做判断 (全等 ===)

 switch (变量) {
     case 100:
         当变量的值 === 100 的时候会执行
         break;
     case 101:
         当变量的值 === 101 的时候会执行
         break;
     default:
         当上述条件都不满足的时候, 执行
 }

switch 的穿透现象 (穿刺现象)

在书写 case 的时候, 没有 书写 break 那么如果这个 case 符合条件那么就会执行它内部的代码 代码执行完毕后, 没有发现 break, 所以会继续向下执行 不管 下一个 case 条件是否满足 直到遇见下一个 break 或者 当前 switch 代码全都执行完毕

        var day = 4     // 取值范围是 1~7 表明 周几

        switch (day) {
            case 1:
                console.log('周一')
                break
            case 2:
                console.log('周二')
                break
            case 3:
                console.log('周三')
                break
            case 4:
                console.log('周四')
            case 5:
                console.log('周五')
                break
            case 6:
                console.log('周六')
            case 7:
                console.log('周日')
            default:
                console.log('上述条件都不满足的时候, 执行')
        }
    //执行结果：周四，周五

三元表达式 (三元运算符/三目运算符/问号冒号表达式)

也是分支语句的一种, 对 if 语句的一个优化

==语法: 条件 ? 条件为真的时候执行的代码(只有一行) : 条件为假的时候执行的代码==

     *  假设一个变量 box 他的值可能是 1 也可能是 2
     * 
     *  我们要根据 这个变量的值 去创建一个新的变量, 内部的值存储为 成功或者失败
     * 
     *  我们自己约定 如果值 === 1 那么为成功, 其他情况 为失败
 

if 语句完成上述需求

var box = 2
var msg;
if (box === 1) {
   msg = '成功'
} else {
   msg = '失败'
}
console.log(msg)

利用 三元表达式优化上述的 if 语句

var box = 1

var msg = 条件 ? 条件为真的时候执行的代码(只有一行) : 条件为假的时候执行的代码
var msg = box === 1 ? '成功' : '失败'

  console.log(msg)