使用 ES12 中的 Logical Assignment 运算符简化条件语句

在前端开发中，我们经常需要根据条件来执行不同的代码逻辑。在 ES6 中，引入了箭头函数和模板字符串等新特性，可以让代码更加简洁和易读。而在 ES12 中，又引入了 Logical Assignment 运算符，可以进一步简化条件语句的编写。

什么是 Logical Assignment 运算符

Logical Assignment 运算符是一种组合运算符，它将逻辑运算符和赋值运算符结合在一起，可以在条件语句中简化赋值操作。在 ES12 中，Logical Assignment 运算符共有三种：

• &&=
• ||=
• ??=

它们分别对应逻辑与、逻辑或和 nullish 合并运算符。

使用 Logical Assignment 运算符

以逻辑与运算符为例，假设我们需要将一个变量的值赋为一个函数的返回值，但前提是这个函数返回的值不能为空，否则我们需要给变量赋一个默认值。在 ES6 中，我们可以这样写：

// javascriptcn.com 代码示例
let result;
const foo = () => {
  // ...
};
if (foo() !== null && foo() !== undefined) {
  result = foo();
} else {
  result = 'default';
}

在 ES12 中，我们可以使用 Logical Assignment 运算符简化这段代码：

let result;
const foo = () => {
  // ...
};
result ||= foo() ?? 'default';

这个表达式的意思是，如果 result 的值为 false，那么将 foo() 的返回值赋给 result；否则，保持 result 不变。而 ?? 运算符则表示，如果 foo() 的返回值为 null 或 undefined，那么将 'default' 赋给 result。

同样的，我们可以使用 Logical Assignment 运算符简化其他条件语句的编写。例如，下面这段代码：

let x;
if (y === undefined || y === null) {
  x = 'default';
} else {
  x = y;
}

可以简化为：

let x;
x ??= 'default';

这个表达式的意思是，如果 x 的值为 null 或 undefined，那么将 'default' 赋给 x；否则，保持 x 不变。

总结

Logical Assignment 运算符可以帮助我们简化条件语句的编写，使代码更加简洁和易读。它适用于需要根据条件来赋值的场景，可以减少重复的代码，提高开发效率。

在使用 Logical Assignment 运算符时，需要注意它的优先级和运算顺序，以避免出现意外的结果。同时，也需要注意运算符的兼容性，在旧版本的浏览器中可能无法正常工作。

在实际开发中，我们可以结合实际场景，灵活运用 Logical Assignment 运算符，让代码更加简洁和优雅。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b94fa7d4982a6eb5e9285