JavaScript分支语句

1.程序的执行顺序

在程序开发中，程序有三种不同的执行方式

执行顺序	说明
顺序结构	从上向下，顺序执行代码
分支结构	根据条件判断，决定执行代码的分支
循环结构	让特定代码重复执行

2.代码块

代码块是多行执行代码的集合，通过一个**花括号{}**放到了一起

在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中以便于一起进行执行

◼ 在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：

通常会通过一些关键字来告知js引擎代码要如何被执行；

比如分支语句、循环语句对应的关键字等；

// 下面是最简单的代码块 --- 这种代码块和顺序执行语句之间没有任何的区别
// 在ES6之前 代码块没有自己的作用域 只有全局作用域和函数作用域
// 但是在ES6后，代码块有了自己单独的作用域
// 代码块后边原则上是可以添加分号的，但是一般开发中并不推荐这么做
{
  let num1 = 23
  let num2 = 31

  console.log(num1 + num2)
}

// JavaScript中常见的代码块

let num = 23

// 1. 代码块可以位于循环和分支语句中
if (num > 20) {
  // 这里代码位于一段代码块中
}

// 2. 代码块也可以位于函数中
function foo() {
  // 这里的代码也位于一段代码块中
}

// 一个对象
var info = {
  name: "wjl",
  age: 18
}

3.分支结构

◼ 程序是生活的一种抽象, 只是我们用代码表示了出来

在开发中, 我们经常需要根据一定的条件, 来决定代码的执行方向
如果 条件满足，才能做某件事情
如果 条件不满足，就做另外一件事情

◼ 分支结构

分支结构的代码就是让我们根据条件来决定代码的执行
分支结构的语句被称为判断结构或者选择结构
几乎所有的编程语言都有分支结构

在开发中，某些情况下一次条件判断是无法达到目的的，所以JS支持分支嵌套结构

◼JavaScript中常见的分支结构有:

if分支结构
switch分支结构

3.1 if分支结构

3.1.1单分支语句:if

if(...) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块

补充

如果代码块中只有一行代码，那么{}可以省略
if (...) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型(Boolean)，

转换规则和Boolean函数的规则一致
数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。 ✓ 因为它们被称为“假值（falsy）”；
其他值被转换为 true，所以它们被称为“真值（truthy）”；

3.1.2 多分支语句

if.. else..

if 语句有时会包含一个可选的 “else” 块
如果判断条件不成立，就会执行else对应的代码块

3.1.3 if.. else if.. else..

有时我们需要判断多个条件, 我们可以通过使用 else if 子句实现

3.2条件运算符

条件运算符又被称为三元运算符或三目运算符，被称为“三元”是因为该运算符中有三个操作数(运算元)

三元运算符可以看成是JavaScript中对于简单逻辑的if-else语句的简便写法

3.3switch语句

switch是分支结构的一种语句

switch是通过判断表达式的结果(或者变量)是否等于case语句的常量，来执行相应的分支体的

与if语句不同的是，switch语句只能做值的相等判断(使用全等运算符 ===)，而if语句可以做值的范围判断

补充

switch 语句有至少一个 case 代码块和一个可选的 default 代码块
case穿透问题:
- 一条case语句结束后，会自动执行下一个case的语句，这种现象被称之为case穿透
- 通过在每个case的代码块后添加break关键字可以解决case穿透问题
case中的匹配使用的是全等运算符，也就是被比较的值必须是相同的类型才能进行匹配

4.循环结构

循环是一种重复运行同一代码的方法

如果是对某一个列表进行循环操作，我们通常也会将循环称之为 遍历(traversal)或者迭代(iteration)

在开发中，某些情况下一次循环是无法达到目的的，我们需要循环中嵌套循环

在JavaScript中支持三种循环方式:

while循环
do..while循环
for循环

4.1 while循环

while循环的语法如下:

当条件成立时，执行代码块
当条件不成立时，跳出代码块

如果条件一直成立(为true)，那么会产生死循环

这个时候必须通过关闭页面来停止死循环，开发中一定要避免死循环的产生

(PS: 浏览器每一个页签都是一个进程，所以一个页面死循环卡顿了，直接关闭一个页签即可，不至于整个浏览器都崩溃

但是因为系统资源是共享的，所以此时电脑中其它软件的运行也会相应变卡)

4.2 do-while循环

do..while循环和while循环非常像，二者经常可以相互替代(不常用)

但是do..while的特点是不管条件成不成立，do循环体都会先执行一次

所以通常我们更倾向于使用while循环，而do-while循环一般很少使用

4.3 for循环

for循环是我们日常开发中使用最多的一种循环方式

对于循环次数不能确定的循环，推荐使用while循环

对于循环次数确定的循环，推荐使用for循环

    // 1.打印10次Hello World
    // for (var i = 0; i < 10; i++) {
    //   console.log("Hello World")
    // }

    // 2.打印0~99的数字
    for (var i = 0; i < 100; i++) {
      console.log(i)
    }

    // 3.0~99的数字和
    var totalCount = 0
    for (var i = 0; i < 100; i++) {
      totalCount += i
    }
    console.log("totalCount:", totalCount)

    // 4.0~99的奇数和
    var totalCount = 0
    for (var i = 0; i < 100; i++) {
      if (i % 2 !== 0) {
        totalCount += i
      }
    }
    console.log("totalCount:", totalCount)

    // 算法优化
    var totalCount = 0
    for (var i = 1; i < 100; i+=2) {
      totalCount += i
    }
    console.log("totalCount:", totalCount)

// 伪代码
for (begin; condition; step) {
  // 循环体
}

begin 执行一次，然后进行迭代:每次检查 condition 后，根据是否符合condition，再判断是否需要执行 body 和 step

4.4循环控制

循环的跳转(控制):

在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情

比如循环体不再执行(即使没有执行完), 跳出循环 --- break
比如本次循环体不再执行, 执行下一次的循环体 --- continue

4.4.1break

break: 直接跳出循环, 循环结束

break 某一条件满足时，退出循环，不再执行后续重复的代码

4.4.2continue

continue: 跳过本次循环次, 执行下一次循环体

continue 某一条件满足时，不执行后续重复的代码, 是 break 的“轻量版”

05_JavaScript分支语句