JavaScript分支语句和逻辑运算符

Rsquo
184 阅读4分钟

1. 程序的执行顺序和代码块

1.1 执行顺序

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

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

执行顺序.png

1.2 代码块

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

    // 一个代码块
{
  var num1 = 10
  var num2 = 20
  var result = num1 + num2
}

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

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

    • 通常会通过一些关键字来告知js引擎代码要如何被执行，比如分支语句、循环语句对应的关键字等

2. if分支语句

  • if语句的使用
  • 案例
  • 补充:
    • 如果只有一行代码, {}可以省略
    • if (条件判断)的隐式转换;

2.1 单分支结构 if..

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

    image.png

  • 补充

    • 如果代码块中只有一行代码，那么 {} 可以省略：

    • if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型（Boolean）

      • 转换规则和Boolean函数的规则一致

      • 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false；它们被称为假值（falsy）

      • 其他值被转换为 true，所以它们被称为 真值（truthy）

2.2 多分支结构 if..else..

image.png

2.3 多分支结构 if..else if..else

image.png

3. 三元运算符

  • 条件运算符：?

    • 这个运算符通过问号 ? 表示
    • 被称为三元运算符，被称为“三元”是因为该运算符中有三个操作数（运算元）
    • 实际上它是 JavaScript 中唯一一个有这么多操作数的运算符

  • 使用格式如下:

    • var result = condition ? value1 : value2;
    • 计算条件结果，如果结果为真，则返回 value1，否则返回 value2。

4. 逻辑运算符

1.4.1. 逻辑运算符的基本使用

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

image.png

1.4.2. 逻辑或的本质

  • ||（或）两个竖线符号表示“或”运算符（也称为短路或）：

    • 从左到右依次计算操作数

    • 处理每一个操作数时，都将其转化为布尔值（Boolean）

    • 如果结果是 true，就停止计算，返回这个操作数的初始值

    • 如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数

  • 注意：返回的值是操作数的初始形式，不会转换为Boolean类型。

  • 换句话说，一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。

    var result = name || info || "默认值"

1.4.3. 逻辑与的本质

  • &&（或）两个竖线符号表示 “与” 运算符（也称为短路与）：

    • 从左到右依次计算操作数

    • 在处理每一个操作数时，都将其转化为布尔值（Boolean）

    • 如果结果是 false，就停止计算，并返回这个操作数的初始值（一般不需要获取到初始值）

    • 如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数

  • 换句话说，与运算 返回第一个假值，如果没有假值就返回最后一个值。

    info && info.friend && info.friend.eating && info.friend.eating()

1.4.4. 逻辑非的补充

  • 逻辑非运算符接受一个参数，并按如下运算：

    • 步骤一：将操作数转化为布尔类型：true/false

    • 步骤二：返回相反的值

  • 两个非运算 !! 有时候用来将某个值转化为布尔类型：

    • 第一个非运算将该值转化为布尔类型并取反，第二个非运算再次取反，最后我们就得到了一个任意值到布尔值的转化。
    var message = "Hello World"
console.log(Boolean(message)) //true
console.log(!!message) // true

5. switch语句

  • switch是分支结构的一种语句：

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

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

  • switch的语法：

    • switch 语句有至少一个 case 代码块和一个可选的 default 代码块

switch.png

  • case穿透问题：

    • 一条case语句结束后，会自动执行下一个case的语句

    • 这种现象被称之为case穿透

  • break关键字

    • 通过在每个case的代码块后添加 break 关键字来解决这个问题
    // 上一首的按钮: 0
// 播放/暂停的按钮: 1
// 下一首的按钮: 2
var btnIndex = 0
switch (btnIndex) {
  case 0:
    console.log("点击了上一首")
    break
  case 1:
    console.log("点击了播放/暂停")
    // 默认情况下是有case穿透
    break
  case 2:
    console.log("点击了下一首停")
    break
  default:
    console.log("当前按钮的索引有问题~")
    break
}
avatar
文章
阅读
粉丝