ES2021 牛X的逻辑赋值运算符

起源

逻辑赋值运算符是一个合成概念，包括了两部分内容：

1. 逻辑运算符

逻辑运算符包括：||（或运算符）、&&（且运算符）、??（空值合并运算符）

2. 赋值运算符

赋值运算符就很简单了，简单的一个 =（等于）就好了。

当然你也可以把结合算术赋值运算符的复杂赋值运算符归为赋值运算符之类，比如：

+=（加等于）、-=（减等于）、*=、\=、%= 等，准确的叫法是算数赋值运算符，当然你也可以直接叫赋值运算符。

接下里我们来解释下 逻辑赋值运算符，从名字来看，你大致就能猜出它们的样子了，没错就是下面三个。

• &&=
• ||=
• ??=

用法

我们以我们熟悉的 +=（加等于）这个运算符举例，同理推理逻辑赋值运算符，我们知道 a += b 其实可拆解为 a = a + b。

那么，我们就可明白各个逻辑赋值运算符代表的意义了，分别如下表：

上面的例子，我们简单的见识了逻辑赋值运算符的使用，我来用文字详细解说下：

• x || = y：仅当 x 为假时，才将 y 赋值给 x。如果 x 是真，则不会进行赋值运算。

• x && = y：仅当 x 为真时，才将 y 赋值给 x。如果 x 为假，则不会进行赋值运算。。

• x ?? = y：仅当 x 为 null 或 undefined 时，才将 y 分配给 x。如果 x 既不是 null 也不是 undefined 则不会进行赋值。

举例

接下里我们要打很多的栗子了：

1. 逻辑或赋值运算符 (||=)

// 基本语法
x ||= y

// 相当于:
x = x || y

if (!x) {
    x = y
}

x = x ? x : y

// 例 1:
let x = 1
let y = 0
x ||= y

console.log(x)
// 输出:
// 1

// 例 2:
let x = 0
let y = 9
x ||= y

console.log(x)
// 输出:
// 9

// 例 3:
let x = 5
let y = 10
x ||= y

console.log(x)
// 输出:
// 5

2. 逻辑与赋值运算符 (&&=)

x &&= y

// 相当于:
x = x && y

if (x) {
  x = y
}

x = x ? y : x

// 例1:
let x = 1
let y = 0 
x &&= y
console.log(x)
// 输出:
// 0

// 例 2:
let x = 0 
let y = 10 
x &&= y
console.log(x)
// 输出:
// 0

// 例 3:
let x = 3 // 真
let y = 15 // 真
x &&= y
console.log(x)
// 输出:
// 15

3. 空值合并赋值运算符 (??=)

x ??= y

// 相当于:
x = x ?? y

if (x == null || x == undefined) {
    x = y
}

x = x == null || x == undefined ? y : x

// 例 1:
let x = null 
let y = 'CondorHero' 
x ??= y
console.log(x)
// 输出:
// 'CondorHero'

// 例 2:
let x = 'Hi' 
let y = 'CondorHero' 
x ??= y
console.log(x)
// 输出:
// 'Hi'

// 例 3:
let x = 'Hi'
let y = null 
x ??= y
console.log(x)
// 输出:
// 'Hi'

// 例 4:
let x = undefined 
let y = 'CondorHero' 
x ??= y

console.log(x)
// 输出:
// 'CondorHero'

总结

我们从算术赋值运算符，讲起引导出了逻辑赋值运算符，然后通过大量的栗子来掌握它的使用。

最后，我们明白逻辑赋值运算其实就是条件语句的语法糖，优化了我们代码的语法和减少了代码所占空间，非常使用。

碎碎念

最近在 哔哩哔哩录视频，今天的日更目标是完不成了，小破站的网站竟然挂了，明天才能好了，先睡觉，完美！

完～