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

程序的执行顺序

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

代码块的理解

代码块是多行执行代码的集合，通过一个花括号{}放到了一起
- 在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中
- ```
//一个代码块
{
  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穿透问题
- 最后一条语句default可以不加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("当前按钮索引值有问题")
}