JS条件分支语句

• 我们的 js 代码都是顺序执行的（从上到下）
• 一般情况下程序是按自上而下的顺序依次执行或者在不考虑优先级的前提下从左向右依次执行，我们称之为顺序执行

// 1. 自上而下
let x = 10;
let y = 2;
console.log(a + b);

// 2. 从左向右
console.log(a); console.log(b);
// 优先级破环了正常的执行顺序
console.log(3 + 2 * 4)

• 条件控制（逻辑分支）就是根据我们设定好的条件来控制程序执行的方式，JavaScript 提供了3种条件控制的语法支持：
  • if条件分支结构
  • switch条件分支结构
  • 三元运算符

if 条件分支结构（重点）

• 可以根据条件决定是否执行否一段代码
• 或者在多段代码之间选择一段代码执行
• 注意: 条件分支语句不能重复执行
• if 语句多用于范围性的条件判断

if 语句—单分支

• 通过一个 if 语句来决定代码是否执行
• 语法：
  • if (条件) { 要执行的代码段 }
• 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行
• 如果 () 里面的条件为真，也就是true，才会执行大括号里面的代码段

// 条件为 true 的时候执行 {} 里面的代码
if (true) {
    console.log('因为条件是 true，我会执行')
}

// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
	console.log('因为条件是 false，我不会执行')    
}

• 示例 :

var age = 18
// var age = 16
if (age >= 18) {
    console.log('你成年了');
}

if else 语句—双分支

• 通过 if 条件来决定，执行哪一个 {} 里面的代码
• 语法：
  • if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }
• 如果if后面的小括号内的条件成立，也就是true，那么就执行if后面的大括号里面的代码
• 如果 if 后面的小括号内的条件不成立，也就是 false ，那就就执行else 后面的大括号里面的代码
• 两个 {} 内的代码一定有一个会执行，有且只有一个能执行

// 条件为 true 的时候，会执行 if 后面的 {} 
if (true) {
  alert('因为条件是 true，我会执行')
} else {
  alert('因为条件是 true，我不会执行')
}

// 条件为 false 的时候，会执行 else 后面的 {}
if (false) {
  alert('因为条件为 false，我不会执行')
} else {
  alert('因为条件为 false，我会执行')
}

• 示例 :

var age = 18
// var age = 16
if (age >= 18) {
    console.log('你成年了');
} else {
    console.log('你还未成年');
}

if else if ... 语句—多分支

• 可以通过 if 和 else if 来设置多个条件进行判断
• 语法：
  • if (条件1) { 条件1为 true 时候执行 } else if (条件2) { 条件2为 true 时候执行 }
• 会从头开始依次判断条件
• 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
• 如果第一个条件为 false，那么就会判断第二个条件，依次类推
• 多个 {} ，最多会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

// 第一个条件为 true，第二个条件为 false，最终会打印 “我是代码段1”
if (true) {
  	alert('我是代码段1')
} else if (false) {
	alert('我是代码段2')           
}

// 第一个条件为 true，第二个条件为 true，最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了，就不会继续判断了
if (true) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {
  	alert('我是代码段1')
} else if (true) {
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 false，最终什么也不会发生
// 因为当所有条件都为 false 的时候，两个 {} 里面的代码都不会执行
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
}

if else if … else 语句—多分支

• 和之前的 if else if ... 基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的 {}

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
  	alert('我是代码段1')
} else if (false) {
  	alert('我是代码段2')
} else {
  	alert('我是代码段3')
}

总结

• if 或 else if 的条件存在数据隐式类型的转换
• else 只能跟在 if 或 else if，之后，从语法角度看 else 可以省略
• 支持嵌套

逻辑运算符 && 和 || 的优先级问题

• 逻辑运算符 && 和 || 同时出现的的情况下有以下几种情况
  • 从左往右依次执行
  • 优先执行&&
  • 优先执行||
• 证明
  • 步骤1 : 要么是 从左向右, 要么是先 &&

if (false && true || true && true) {
      console.log('我执行了')
}
/*
    分析:
    如果 console.log('我执行了'); 能执行 说明if小括号中的条件为真
    从左向右执行
        false && true || true && true
        false || true && true
        true && true
        true
    先执行逻辑或
        false && true || true && true
        false && true && true
        false && true
        false
    先执行逻辑与
        false && true || true && true
        false || true && true
        false || true
        true
*/

步骤2 : 排除了从左向右

if (true || false && false) {
      console.log('我也执行了')
}
/*
    分析:
    如果 console.log('我也执行了');能执行,说明if小括号中的条件为真
    从左向右执行
        true || false && false
        true && false
        false
    先执行逻辑与
        true || false && false
        true || false
        true
*/

switch 条件分支结构（重点）

• 也是条件判断语句的一种
• 是对于某一个变量的判断
• 使用与对某个值的准确判断
• 语法：

switch (要判断的变量) {
  case 情况1:
    情况1要执行的代码
    break
  case 情况2:
    情况2要执行的代码
    break
  case 情况3:
    情况3要执行的代码
    break
  default:
    上述情况都不满足的时候执行的代码
}

• • 要判断某一个变量 等于 某一个值得时候使用
  • 注意：
    • 要判断的变量, 必须和 case 后面的内容是 ===结果为 true 才叫做满足，也就是 数据类型 和 值 必须一样才行
    • switch 的判断, 只能判断准确的等于哪一个值, 不能进行范围的判断，也不能进行逻辑运算的判断
    • default 可以写, 可以不写。不写的时候, 就是所有条件都不满足, 就没有代码执行
    • break 必须要书写, 如果不写 break, 那么就会进行穿透
    • 穿透, 下一个 case 不管是不是满足, 都会直接执行代码, 直到 switch 结束或者遇到 break 为止
    • 穿透的时候, 会从第一个满足条件的case开始向下穿透
  • 凡是可使用 switch 的逻辑，均可以使用 if 实现
• 例子🌰： 根据变量给出的数字显示是星期几

var week = 1
switch (week) {
  case 1:
    alert('星期一')
    break
  case 2:
    alert('星期二')
    break
  case 3:
    alert('星期三')
    break
  case 4:
    alert('星期四')
    break
  case 5:
    alert('星期五')
    break
  case 6:
    alert('星期六')
    break
  case 7:
    alert('星期日')
    break
  default:
    alert('请输入一个 1 ～ 7 之间的数字')
}

案例: 根据月份得到每一个月中有多少天, 不考虑闰年的情况

• 正常实现

// 定义一个变量用来表示月份
var month = 1
// 使用switch 语句来判断
switch (month) {
    case 1:
        console.log('31天');
        break
    case 2:
        console.log('28天');
        break
    case 3:
        console.log('31天');
        break
    case 4:
        console.log('30天');
        break
    case 5:
        console.log('31天');
        break
    case 6:
        console.log('30天');
        break
    case 7:
        console.log('31天');
        break
    case 8:
        console.log('31天');
        break
    case 9:
        console.log('30天');
        break
    case 10:
        console.log('31天');
        break
    case 11:
        console.log('30天');
        break
    case 12:
        console.log('31天');
        break
}

• 利用穿透来实现

// 利用穿透效果来实现
// 定义一个变量用来表示月份
var month = 1
// 使用switch 语句来判断
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log('31天');
        break
    case 4:
    case 6:
    case 9:
    case 11:
        console.log('30天');
    case 2:
        console.log('28天');
        break
}

案例:根据给定的月年日,计算出是一年中的多少天

// 定变量
var year = 2021
var month = 12
var data = 31
// 定义一个变量 用于接收我们的总天数
var day = 0
switch (month) {
    case 12: day += 31
    case 11: day += 30
    case 10: day += 31
    case 9: day += 30
    case 8: day += 31
    case 7: day += 31
    case 6: day += 30
    case 5: day += 31
    case 4: day += 30
    case 3: day += 31
    case 2:
        // 这里我们是不是可以考虑二月份的情况
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
            day += 29
        } else {
            day += 28
        }
}
// 这里是不是上面的月份累加完了加上我们的几天
day += data
console.log(day);

三元运算(三元表达式)

• 三元运算，就是用 两个符号 组成一个语句
• 三元运算只是对 if else 语句的一个简写形式
• 语法：
  • 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')

• 注意 :
  • 每一个代码执行区间, 只能书写一句话

• 10 < 20 ? console.log('a') : console.log('b')
  

  只能简写 if else 语句

  //  简写 if else
  var age = 15
  age >= 18 ? console.log('学车') : ''
  // 等价于
  if (age >= 18) {
    console.log('学车')
  } else {
  }
  

  • 可以用来执行代码, 也可以用来赋值

  // 三元表达式赋值
  var gender = 1
  var sex = gender % 2 === 0 ? '女' : '男'
  console.log(sex)
  //等价于
  if (gender % 2 === 0) {
    var sex = '女'
  } else {
    var sex = '男'
  }