12.4 逻辑赋值运算符（||=、&&=、??=）

12.4 逻辑赋值运算符（||=、&&=、??=）

ES2021 引入了逻辑赋值运算符（Logical Assignment Operators），包括逻辑或赋值（||=）、逻辑与赋值（&&=）和逻辑空值赋值（??=）。这些运算符结合了逻辑运算符和赋值操作，使代码更加简洁和易读。本节将详细介绍这些运算符的用法及其应用场景。

12.4.1 逻辑或赋值（||=）

逻辑或赋值运算符（||=）用于在变量为假值（如 null、undefined、false、0、""）时，将其赋值为右侧的值。

1. 基本用法

let a = null;
a ||= "Default";
console.log(a); // 输出 "Default"

2. 等价代码

a = a || "Default";

12.4.2 逻辑与赋值（&&=）

逻辑与赋值运算符（&&=）用于在变量为真值时，将其赋值为右侧的值。

1. 基本用法

let b = "Hello";
b &&= "World";
console.log(b); // 输出 "World"

2. 等价代码

b = b && "World";

12.4.3 逻辑空值赋值（??=）

逻辑空值赋值运算符（??=）用于在变量为 null 或 undefined 时，将其赋值为右侧的值。

1. 基本用法

let c = null;
c ??= "Default";
console.log(c); // 输出 "Default"

2. 等价代码

c = c ?? "Default";

12.4.4 应用场景

1. 默认值赋值
逻辑或赋值和逻辑空值赋值可以用于为变量设置默认值：

let options = {};
options.timeout ||= 1000; // 如果 options.timeout 为假值，则设置为 1000
options.retries ??= 3; // 如果 options.retries 为 null 或 undefined，则设置为 3

2. 条件赋值
逻辑与赋值可以用于条件赋值：

let user = { name: "Alice" };
user.name &&= "Bob"; // 如果 user.name 为真值，则设置为 "Bob"

12.4.5 示例代码

示例 1：逻辑或赋值

let a = null;
a ||= "Default";
console.log(a); // 输出 "Default"

示例 2：逻辑与赋值

let b = "Hello";
b &&= "World";
console.log(b); // 输出 "World"

示例 3：逻辑空值赋值

let c = null;
c ??= "Default";
console.log(c); // 输出 "Default"

示例 4：默认值赋值

let options = {};
options.timeout ||= 1000;
options.retries ??= 3;

console.log(options); // 输出 { timeout: 1000, retries: 3 }

12.4.6 总结

• 逻辑或赋值（||=）：在变量为假值时赋值。
• 逻辑与赋值（&&=）：在变量为真值时赋值。
• 逻辑空值赋值（??=）：在变量为 null 或 undefined 时赋值。
• 应用场景：默认值赋值、条件赋值。

通过掌握逻辑赋值运算符，你可以编写更简洁、更易读的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 逻辑或赋值和逻辑空值赋值的主要区别是什么？
2. 在什么情况下应该使用逻辑与赋值？
3. 如何使用逻辑赋值运算符简化代码？