04_JavaScript的分支语句-三元运算符-逻辑运算符补充

╰半夏微凉° 2023-09-28 08:32 24阅读 0赞

#### 程序的执行顺序 ####

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

#### 代码块的理解 ####

*  代码块是**多行执行代码的集合**，通过**一个花括号\{\}放到了一起**
    
     *  在开发中，一**行代码很难完成某一个特定的功能**，我们就会将这些代码放到**一个代码块中**
     *      //一个代码块
            {
                    
              var num1 = 10
            	var num2 = 20
            	var result = num1 + num2 
            }
     *  
 *  在JavaScript中，我们可以**通过流程控制语句来决定如何执行一个代码块**
    
     *  通常会通过一些**关键字来告知js引擎代码要如何被执行**
     *  比如**分支语句、循环语句**对应的**关键字**等

#### 什么是分支结构 ####

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

#### if分支语句 ####

*  **单分支结构**
    
     *  if…
 *  **多分支结构**
    
     *  if…else…
     *  if…else if…else…

##### 单分支结构 #####

*  单分支语句：if
    
     *  if(…) 语句计算括号里的条件表达式，如果**计算结果是 true**，就会**执行对应的代码块**
     *      //如果条件成立 那么执行代码块
            if(条件判断) {
                    
              //条件成立 执行的代码块
            }
 *  案例: 如果小明考试超过90分, 就去游乐场
 *      var score = 85
        if(score > 90) {
              
          console.log("去游乐场")
        }
 *  if语句的细节补充
    
     *  如果**代码块中只有一行代码**，那么\*\*\{\}可以省略\*\*
     *  if (…) 语句会**计算圆括号内的表达式**，并将**计算结果转换为布尔型** (隐式转换)
        
         *  转换规则和Boolean函数的规则一致
         *  **数字 0、空字符串 “ ”、null、undefined 和 NaN** 都会被转换成 **false** 因为它们被称为\*\*“假值"\*\*
         *  其他值被转换为 **true**，所以它们被称为\*\*“真值”\*\*

##### 多分支结构 #####

*  **多分支语句：if… else…**
    
     *  if 语句有时会包含一个**可选的 “else” 块**
     *  如果判断**条件不成立**，就会**执行else内部的代码**
     *      //如果条件成立 那么执行代码块
            //如果条件不成立 那么执行另一个代码块
            if(条件判断) {
                    
              //条件成立 执行的代码块
            } else {
                    
              //条件不成立 执行的代码块
            }
 *  案例：如果分数超过90分去游乐场，否则去上补习班
    
     *      var score = 85
            if(score > 90) {
                    
              console.log("去游乐场")
            } else {
                    
              console.log("去补习班")
            }
 *  **多分支结构： if… else if… else…**
    
     *  有时我们需要**判断多个条件**；我们可以通过使用 **else if 子句实现**
        
         *      if(条件1) {
                          
                  //代码块1
                } else if(条件2) {
                          
                  //代码块2
                } else if(条件3) {
                          
                  //代码块3
                } else {
                          
                  //代码块4 (所有条件都不满足时执行)
                }
 *  案例: 分数评级: 考试分数大于90：优秀, 大于80小于等于90：良好, 大于60小于等于80：合格, 小于60分：不及格
    
     *      var score = 85
            if(score > 90) {
                    
              console.log("优秀")
            } else if(score > 80) {
                    
              console.log("良好")
            } else if(score > 60) {
                    
              console.log("合格")
            } else {
                    
              console.log("不及格")
            }

#### 三元运算符 ####

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

#### 逻辑运算符 ####

*  逻辑运算符，主要是**有三个**
    
     *  **||（或），&&（与），!（非）**
     *  它可以将**多个表达式或者值放到一起**来**获取到一个最终的结果**

##### **逻辑或的本质** #####

*  脱离分支语句, 单独使用逻辑或
 *  1.  拿到**第一个运算元** 将**运算元转成Boolean类型**
 *  1.  对转成的boolean类型**从左到右依次进行判断**
        
         *  如果**为true**, 直接将第一个结果的**初始值返回**
         *  如果**为false**, 进行**第二个运算元的判断**
         *  **以此类推**
 *  1.  如果找到**最后, 也没有找到true,** 那么**返回最后一个运算元**
 *  **逻辑或本质推导**: 获取第一个有值的结果
    
     *      var info = undefined
            //当传过来的info有值时 则返回info的初始值
            //当传过来的info没有值时 则返回默认值 "我是一个默认值"
            var message = info || "我是一个默认值"
            console.log(message.length)

##### **逻辑与的本质** #####

*  脱离分支语句, 单独使用逻辑与
 *  1.  拿到**第一个运算元**, 将**运算元转成Boolean类型**
    2.  对运算元的Boolean类型**从左到右依次进行判断**
        
         *  如果false, 返回这个运算元的初始值
         *  如果true, 查找下一个继续来运算
         *  以此类推
    3.  如果查找了**所有的都为true**, 那么**返回最后一个运算元的初始值**
 *  **逻辑与的本质推导**: 对一些对象中的方法进行有值判断
    
     *      var obj = {
                    
            	name: "why",
            	friend: {
                    
            	name: "kobe",
            	eating: function() {
                    
            		console.log("eat something")
            		}
            	}
            }
            //此时调用eating的方法是不严谨的 如果此时不存在friend属性 则调用undefined的eating方法会报错
            //obj.friend.eating()
            
            //可以使用逻辑与的本质推导 若某一个属性或方法不存在则不会继续执行
            obj && obj.friend && obj.friend.eating && obj.friend.eating()

##### **逻辑非的补充** #####

*  当我们想要将一个任意值转换成boolean类型时 一般使用Boolean函数
    
     *      var message = "hello world"
            console.log(Boolean(message))
 *  我们也可以使用逻辑非将任意值 转换成boolean类型
    
     *      var obj = null
            //null布尔值时false 取反一次!null是true 取反两次!!null是false
            console.log(!!obj)

#### switch语句 ####

*  switch是分支结构的一种语句
    
     *  它是通过**判断表达式的结果（或者变量）是否等于case语句的常量**，来执行相应的分支体的
 *  与if语句不同的是，**switch语句只能做值的相等判断（并且使用全等运算符 ===）**，而**if语句可以做值的范围判断**
 *  **switch的语法**
    
     *  switch 语句**有至少一个 case 代码块**和一**个可选的 default 代码块**
     *      switch(变量) {
                    
              case 常量1:
              	//若变量 === 常量1 执行的代码1
            		break
              case 常量2:
            		//若变量 === 常量2 执行的代码2
            		break
              default:
              	//若上面条件都不满足 执行的代码3
            }
 *  **case穿透问题**
    
     *  **一条case语句结束后**，会**自动执行下一个case的语句** 也就是说会自动多执行一条case语句
     *  这种现象被称之为**case穿透**
 *  **break关键字**
    
     *  通过在**每个case的代码块后添加break关键字**来解决case穿透问题
     *  最后一条语句d**efault可以不加break** 因为是**最后一条语句 不会存在穿透问题**
 *  **注意事项**：这里的相等是**严格相等(===)**
    
     *  被比较的值必须是相同的类型才能进行匹配
 *  **案例**: 点击不同按钮 有不同的功能 假如btnIndex为0是 是上一首, 为1时 是播放/暂停, 为2时 是下一首
    
     *      //定义按钮索引
            var btnIndex = 0
            switch(btnIndex) {
                    
              case 0:
                console.log("点击了上一首")
                break
              case 1:
                console.log("点击了播放/暂停")
                break
              case 2:
                console.log("点击了下一首")
              default:
                console.log("当前按钮索引值有问题")
            }