ES12 (ES2021) 新增了 Logical Assignment 运算符。这些新运算符可以简化代码并提高可读性，特别是对于需要频繁进行逻辑运算的前端开发者来说。
什么是 Logical Assignment 运算符
Logical Assignment 运算符是将逻辑运算和赋值运算结合起来的新运算符。这些新运算符用于将逻辑值赋给变量或对象属性，这样我们就可以省略常见的赋值步骤和一些条件逻辑。
下面是 ES12 中的 Logical Assignment 运算符列表：
| 运算符 | 说明 | 等价于 |
|---|---|---|
| ` | =` | |
&&= |
将右侧的值赋给左侧的变量，当左侧的变量为 true 或 undefined 时 | a &&= b 就等价于 a && (a = b) |
??= |
将右侧的值赋给左侧的变量，当左侧的变量为 null 或 undefined 时 | a ??= b 就等价于 a ?? (a = b) |
Logical Assignment 运算符示例
来看几个示例，以了解 Logical Assignment 运算符的使用方法。
-- -- ------- ---------- -------- -------- ----------------- - --- - ---------------- --- --- --------------- --- -- ------ --------------------------------------------------------------------------- -
在上述代码中，我们使用了 ??= 运算符来为 options.pageSize 和 options.pageNum 变量定义默认值 10 和 1，这样函数将不必显式检查 options 是否具有正确的值，可以直接发起数据请求。
另一个有用的例子是更新对象属性：
----- --- - - ------ ------- -- -- - --------- ---------- ------- --------- --- -------- -- - --------- ----- ----- --------- --- ------
通过 ??= 运算符，当属性未定义时设置默认值。通过 &&= 运算符，仅当属性已定义时才更新其值。
除了上述示例，还有许多其他场景会产生类似的效果，例如：
--- ----- - -- --- ------ - --- -- -- ------- ---------- ------- ----- --- --- ------ --- -------------------
这些示例中，Logical Assignment 运算符能够简化许多操作并改善可读性。
Logical Assignment 运算符的注意事项
虽然 Logical Assignment 运算符很方便，但请注意以下几点：
- 尽量不要过度依赖它们，否则会降低代码可读性。
- 如果你将 Logical Assignment 运算符用于变量，则只能使用
||=和&&=运算符（因为??=运算符不能用于变量，当左侧的变量值变成null或者undefined时才会赋值）。 - 不要过度混合使用逻辑运算符和 Logical Assignment 运算符，否则可能会让代码难以阅读和理解。
结论
在本文中，我们介绍了 ES12 中的 Logical Assignment 运算符和如何利用它们提高代码可读性。
通过 Logical Assignment 运算符，我们可以定义默认值、更新对象属性和改善代码流程等操作，以减少代码量并提高可读性。
当然，如何使用 Logical Assignment 运算符是个技巧活，需要持续学习并不断实践，只有这样才能真正提高代码的质量和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720ba952e7021665e03bb0a