JavaScript 中有四种逻辑运行符, &&(与)、 ||(或)、 !(非)、 ?? (空值合并)。初步的介绍与使用在逻辑运算符章节有,这个章节讲解一下深入用法。

与运算符

&& 表示与运算符。简单地理解,必须所有操作数都为真值,才返回 true,存在一个操作数为假值则返回 false

false && false // false
true && false // false
true && true // true
true && true && false // false

与运行符经常用来判断条件同时成立

$$jsdemo$$
$$edit$$
const hour = Number(prompt("请输入当前小时:"))

if (hour >= 9 && hour <= 17) {
    // 如果当前时间晚于 9 点, 早于 17 点, 说明是上班时间
    alert("现在是上班时间。")
} else {
    alert("现在是下班时间。")
}

返回第一个假值

实际上,&& 运算符的运算规则是, 从左至右进行运算,返回遇到的第一个假值的操作数,否则返回最后一个操作数。 关于运算数是真值还是假值可以查看真值与假值部分

因此我们可以用这个原理返回运算数中第一个假值或最后一个值。

0 && null // 0
true && {} && undefined // undefined
true && NaN && 0 // NaN
1 && 2 && 3 && 4 // 4,最后一个值

与运算 && 做了如下的事:

  1. 从左到右依次计算操作数。
  2. 在处理每一个操作数时,都将其转化为布尔值。如果结果是 false,就停止计算,并返回这个操作数的初始值。
  3. 如果所有的操作数都被计算过(例如都是真值),则返回最后一个操作数。

或运算符

|| 表示或运算符。简单地理解,只要有一个操作数为真值,则返回 true,全为假值才返回 false

false || false // false
true || false // true
true || true // true
false || false || true // true

或运行符经常用来判断条件部分成立

$$jsdemo$$
$$edit$$
const hour = Number(prompt("请输入当前小时:"))

if (hour < 9 || hour > 17) {
    // 如果当前时间早于 9 点, 晚于 17 点, 说明是下班时间
    alert("现在是下班时间。")
} else {
    alert("现在是上班时间。")
}

返回第一个真值

实际上,&& 运算符的运算规则是, 从左至右进行运算,返回遇到的第一个真值的操作数,否则返回最后一个操作数。 关于运算数是真值还是假值可以查看真值与假值部分

0 || null // null
false || {} || undefined // {}
false || NaN || 0 // 0,最后一个值
0 || 1 || 2 || 3 // 1

或运算符 || 做了如下的事情:

  1. 从左到右依次计算操作数。
  2. 处理每一个操作数时,都将其转化为布尔值。如果结果是 true,就停止计算,返回这个操作数的初始值。
  3. 如果所有的操作数都被计算过(也就是,转换结果都是 false),则返回最后一个操作数。

利用这个特性,可以把我们的代码写得更优雅更简单,以下两段代码是等价的。

$$jsdemo$$
$$edit$$
let username = prompt("请输入用户名:")
if (username === "") {
    username = "默认用户名"
}
alert("你的用户名是:" + username)
$$jsdemo$$
$$edit$$
const username = prompt('请输入用户名:') || '默认用户名'
alert("你的用户名是:" + username)

非运算符

! 表示非运算符,它会进行以下操作。

  1. 将操作数转成布尔类型。
  2. 返回相反的布尔值。
!true // false
!false // true
!0 // true
!1 // false
!{} // false
!undefined // true

$$tip 优先级顺序 ! > && > || 。 $$

真值与假值

在 JavaScript 中,所有转为 Boolean 类型后为 true 的值都被称为真值,为 false 类型的值都被称为假值。

以下为真值:

  • 非 0 的数字
  • 非空的字符串
  • 数组
  • 对象

以下为假值:

  • 0
  • 空字符串
  • null
  • undefined
  • NaN
Boolean(10) // true
Boolean(-5) // true
Boolean('hello') // true
Boolean({}) // true
Boolean(new Date()) // true

Boolean(0) // false
Boolean('') // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(NaN) // false