在 JavaScript 中，我们经常需要对变量进行判断或赋值操作。这些操作经常会涉及到逻辑运算符，如 &&、|| 等。ES11 提供了一种新的逻辑赋值操作符，可以让我们在进行逻辑运算的同时直接进行赋值操作，从而简化代码。
逻辑赋值操作符
ES11 中新增了三个逻辑赋值操作符：||=、&&= 和 ??=。它们分别对应三个逻辑运算符：||、&& 和 ??。这些操作符的使用方法如下：
x ||= y; x &&= y; x ??= y;
其中，x 是要被赋值的变量，y 是一个表达式。逻辑赋值操作符的作用是将 y 的值赋给 x，但只有在某些条件下才会进行赋值操作。
- 对于 ||=，只有 x 是 falsy 值（即 false、0、''、null、undefined 或 NaN）时，才会将 y 的值赋给 x。
- 对于 &&=，只有 x 是 truthy 值（即非 falsy 值），才会将 y 的值赋给 x。
- 对于 ??=，只有 x 是 null 或 undefined 时，才会将 y 的值赋给 x。
这些操作符的使用方法比较简单明了，通过它们我们可以避免在一些情况下进行重复的赋值操作，从而简化代码。
示例代码
下面是一些使用逻辑赋值操作符的示例代码。
-- -------------------- ---- ------- -- -- --- ---- --- -- - --- --- --------------- -- -- - --- --- --------------- -- -- -- -- --- ---- --- - - - ----- ------- -- ------ --- ---- ------- -------------------- -- --- ----- ------ --- -------- --- ------- -------------------- -- --- ----- -- -- --- ---- --- -- - --- --- --------------- -- -- - --- --- --------------- -- --
从上面的例子中可以看出，逻辑赋值操作符可以很方便地简化代码，让我们的代码更加精简和易于阅读。
注意事项
虽然逻辑赋值操作符可以简化代码，但在使用时需要注意以下几点：
- 在使用 ||= 和 &&= 时，表达式 y 的计算顺序和优先级可能与预期不同。因此，建议使用括号明确表达式的顺序和优先级，以免出现错误。
- 在使用 ??= 时，需要注意赋值操作只会在 x 是 null 或 undefined 时才会执行。如果 x 已经被赋值为其他值，那么 ??= 操作将不会有任何效果。
总结
逻辑赋值操作符是 ES11 新增的语言特性，可以让我们在进行逻辑运算的同时直接进行赋值操作，从而简化代码。在使用逻辑赋值操作符时，需要注意表达式的计算顺序和优先级，并且需要注意赋值操作只会在特定条件下才会执行。逻辑赋值操作符的使用可以让我们的代码更加精简和易于阅读，并可以提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481adeb48841e989412a877