在 ECMAScript 2021 (ES12) 中，新增了三个逻辑赋值运算符，分别是 &&=、||= 和 ??=，它们可以帮助我们更加简洁地进行赋值操作。本文将详细介绍这三个运算符的用法和意义，以及如何在实际开发中应用它们。
什么是逻辑赋值运算符
在介绍逻辑赋值运算符之前，我们先来了解什么是逻辑运算符。逻辑运算符包括 &&（逻辑与）、||（逻辑或）和 !（逻辑非），它们常常用于条件判断和逻辑运算。
而逻辑赋值运算符就是在逻辑运算符的基础上添加了赋值操作。例如，在 ES6 中，我们想要将变量 x 的值设置为 10，可以使用以下语句：
let x = 10;
而在 ES12 中，我们可以使用逻辑赋值运算符 ||= 更加简洁地实现：
let x; x ||= 10;
这与下面的语句是等价的：
let x; if (!x) { x = 10; }
同样的，也可以使用 &&= 和 ??= 进行赋值操作。接下来将详细介绍它们的用法和意义。
&&=：逻辑与赋值运算符
逻辑与赋值运算符 &&= 的用法如下：
x &&= y;
该语句等同于下面的语句：
if (x) { x = y; }
也就是说，如果 x 是真值（即非空、非零、非 false），则将 y 赋值给 x；否则不进行赋值操作。例如：
let x = 1; x &&= 2; // x 等于 2 let y = 0; y &&= 3; // y 等于 0，因为 y 是假值
逻辑与赋值运算符可以使代码更加简洁和易读，特别是在进行条件赋值时更是如此。
||=：逻辑或赋值运算符
逻辑或赋值运算符 ||= 的用法如下：
x ||= y;
该语句等同于下面的语句：
if (!x) { x = y; }
也就是说，如果 x 是假值（即空、零、false），则将 y 赋值给 x；否则不进行赋值操作。例如：
let x = 0; x ||= 1; // x 等于 1 let y; y ||= 2; // y 等于 2，因为 y 是假值
逻辑或赋值运算符也可以使代码更加简洁和易读，特别是在进行默认赋值时更是如此。
??=：nullish 合并赋值运算符
nullish 合并赋值运算符 ??= 的用法如下：
x ??= y;
该语句等同于下面的语句：
if (x === null || x === undefined) { x = y; }
也就是说，如果 x 是 null 或 undefined，将 y 赋值给 x；否则不进行赋值操作。例如：
let x = null; x ??= 1; // x 等于 null，因为 x 是 null 值 let y; y ??= 2; // y 等于 2，因为 y 是 undefined 值
nullish 合并赋值运算符可以避免在判断 null 或 undefined 时使用 || 运算符带来的一些问题。例如：
let x = ''; let y = x || 'default'; // y 等于 'default'，因为 x 是 falsy 值 let z = ''; z ??= 'default'; // z 等于 ''，因为 z 是空字符串
如何使用逻辑赋值运算符
逻辑赋值运算符可以使我们的代码更加简洁和易读，但它们也可能会带来一些风险和副作用。因此，在使用时需要注意一些细节：
- 逻辑赋值运算符不是完全等价于普通的逻辑运算符和赋值运算符的组合。
- 逻辑赋值运算符只适用于基本数据类型和对象的赋值，对于其他类型（如数组、函数等）没有效果。
- 逻辑赋值运算符可能会导致代码的可读性降低，如果表达式过于复杂，建议使用传统的 if-else 语句。
下面是一些使用逻辑赋值运算符的示例代码：
-- -------------------- ---- ------- --- - - -- -- -- ------- -- -- -- --- -- - - - -- - ---- - - - -- - -- --------- - --- - --- -- - --- -- --------------- -- -- -展开代码
-- -------------------- ---- ------- --- --- - --- --- -- --------- -- -------- - ----- - -- - -- --------- ----- --- -- ----------------- -- -- --- --展开代码
总结
逻辑赋值运算符是 ECMAScript 2021 (ES12) 中新增的一种赋值方式，包括 &&=、||= 和 ??= 三种运算符。它们可以帮助我们更加简洁地进行赋值操作，但要注意在使用时的细节和风险。掌握逻辑赋值运算符可以提高我们的编程效率和代码质量，也是我们作为前端开发工程师必须掌握的一项技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652264ab95b1f8cacd9d40c4
