利用 ES12 中的 Logical Assignment 运算符提高代码可读性的方法

ES12 (ES2021) 新增了 Logical Assignment 运算符。这些新运算符可以简化代码并提高可读性，特别是对于需要频繁进行逻辑运算的前端开发者来说。

什么是 Logical Assignment 运算符

Logical Assignment 运算符是将逻辑运算和赋值运算结合起来的新运算符。这些新运算符用于将逻辑值赋给变量或对象属性，这样我们就可以省略常见的赋值步骤和一些条件逻辑。

下面是 ES12 中的 Logical Assignment 运算符列表：

Logical Assignment 运算符示例

来看几个示例，以了解 Logical Assignment 运算符的使用方法。

// 使用 Logical Assignment 运算符定义默认值
function fetchData(options = {}) {
  options.pageSize ??= 10;
  options.pageNum ??= 1;
  return fetch(`/api/data?pageNum=${options.pageNum}&pageSize=${options.pageSize}`);
}

在上述代码中，我们使用了 ??= 运算符来为 options.pageSize 和 options.pageNum 变量定义默认值 10 和 1，这样函数将不必显式检查 options 是否具有正确的值，可以直接发起数据请求。

另一个有用的例子是更新对象属性：

const obj = { prop1: 'hello' };

// 当 obj.prop1 未定义时设置默认值为 'world'
obj.prop1 ??= 'world';

// 将 obj.prop1 的值更新为 'foo'
obj.prop1 &&= 'foo';

通过 ??= 运算符，当属性未定义时设置默认值。通过 &&= 运算符，仅当属性已定义时才更新其值。

除了上述示例，还有许多其他场景会产生类似的效果，例如：

let count = 0;
let config = {};

// 使用 Logical Assignment 运算符更新变量
count ??= 10;
config ??= getDefaultConfig();

这些示例中，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