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