完全理解 ES2021 的 “logical assignment” 表达式

ES2021 引入了一种新的表达式——“logical assignment” 表达式。这个新特性可以让我们更加方便地进行逻辑赋值操作，从而减少代码量，提高代码的可读性和可维护性。

什么是 “logical assignment” 表达式

“logical assignment” 表达式是一种结合了逻辑运算符和赋值操作符的新表达式。它可以将一个变量的值与另一个值进行逻辑运算，然后将运算结果赋值给该变量。在 JavaScript 中，它的语法形式如下：

a ||= b;
a &&= b;
a ??= b;

其中，||= 是逻辑或赋值操作符，&&= 是逻辑与赋值操作符，??= 是空值合并赋值操作符。

如何使用 “logical assignment” 表达式

使用 “logical assignment” 表达式可以让我们更加方便地进行逻辑赋值操作。例如，我们可以用它来判断一个变量是否已经被赋值，如果没有被赋值，就给它赋一个默认值：

let a;
a ||= 10;
console.log(a); // 输出 10

let b = 20;
b ||= 10;
console.log(b); // 输出 20

在上面的代码中，我们先定义了一个变量 a，然后使用 ||= 运算符给它赋了一个默认值 10。由于变量 a 没有被赋值，所以它的值被赋值为 10。再看变量 b，它已经被赋值为 20，所以 ||= 运算符不会对它进行赋值操作。

除了 ||= 运算符，我们还可以使用 &&= 运算符和 ??= 运算符。例如，我们可以使用 &&= 运算符来进行条件赋值操作：

let c = 10;
c &&= 20;
console.log(c); // 输出 20

let d = 0;
d &&= 20;
console.log(d); // 输出 0

在上面的代码中，我们先定义了一个变量 c，然后使用 &&= 运算符进行条件赋值操作。由于变量 c 的值为 10，所以条件为真，&&= 运算符会将变量 c 的值赋值为 20。再看变量 d，它的值为 0，所以条件为假，&&= 运算符不会对它进行赋值操作。

最后，我们还可以使用 ??= 运算符来进行空值合并赋值操作：

let e;
e ??= 10;
console.log(e); // 输出 10

let f = 20;
f ??= 10;
console.log(f); // 输出 20

在上面的代码中，我们先定义了一个变量 e，然后使用 ??= 运算符进行空值合并赋值操作。由于变量 e 没有被赋值，所以它的值被赋值为 10。再看变量 f，它已经被赋值为 20，所以 ??= 运算符不会对它进行赋值操作。

总结

“logical assignment” 表达式是一种结合了逻辑运算符和赋值操作符的新表达式，它可以让我们更加方便地进行逻辑赋值操作，从而减少代码量，提高代码的可读性和可维护性。在实际开发中，我们可以根据需要使用 ||=、&&=、??= 运算符来进行逻辑赋值操作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657adae7d2f5e1655d557d3c