快速了解JavaScript——条件分支语句

来源：千锋教育

发布人：lxl

时间： 2023-05-19 10:39:07

　　我们的 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:
    上述情况都不满足的时候执行的代码
}