逻辑赋值运算符 ||=, &&=, ??=

ECMAScript 2021（ES12）引入了三个新的逻辑赋值运算符，它们结合了逻辑运算符和赋值操作，为开发者提供了更简洁的语法来处理常见的赋值模式。这些运算符是 ||=（逻辑或赋值）、&&=（逻辑与赋值）和 ??=（逻辑空值赋值）。

逻辑或赋值运算符 (||=)

||= 运算符仅在左侧操作数为假值（falsy）时才会执行赋值操作。它的行为等同于：

x || (x = y);

示例

let a = 0;
let b = 42;

a ||= b; // a = 42，因为0是假值
console.log(a); // 42

let c = 1;
c ||= 2; // c保持为1，因为1是真值
console.log(c); // 1

逻辑与赋值运算符 (&&=)

&&= 运算符仅在左侧操作数为真值（truthy）时才会执行赋值操作。它的行为等同于：

x && (x = y);

示例

let a = 1;
let b = 0;

a &&= b; // a = 0，因为1是真值
console.log(a); // 0

let c = null;
c &&= 2; // c保持为null，因为null是假值
console.log(c); // null

逻辑空值赋值运算符 (??=)

??= 运算符仅在左侧操作数为 null 或 undefined 时才会执行赋值操作。它的行为等同于：

x ?? (x = y);

示例

let a = null;
let b = 42;

a ??= b; // a = 42，因为a是null
console.log(a); // 42

let c = 0;
c ??= 2; // c保持为0，因为0不是null或undefined
console.log(c); // 0

使用场景

这些逻辑赋值运算符特别适合以下场景：

1. 设置默认值：||= 和 ??= 可以方便地为变量设置默认值

   javascript 复制代码

   function greet(name) {
     name ??= 'Guest';
     console.log(`Hello, ${name}!`);
   }

2. 条件赋值：&&= 可以用于条件性赋值

   javascript 复制代码

   let user = { name: 'Alice' };
   user.name &&= user.name.toUpperCase();

3. 初始化对象属性：避免重复初始化已存在的属性

   javascript 复制代码

   const config = {};
   config.port ??= 3000;

注意事项

1. ||= 和 ??= 的区别在于假值的判断标准：

   • ||= 对所有假值（false, 0, "", null, undefined, NaN）都会触发赋值
   • ??= 只对 null 和 undefined 触发赋值

2. 这些运算符是短路求值的，只有在必要时才会计算右侧表达式

3. 它们不能用于未声明的变量，必须先声明变量才能使用这些运算符

浏览器兼容性

截至2021年，这些运算符已在大多数现代浏览器中实现，包括：

• Chrome 85+
• Firefox 79+
• Safari 14+
• Edge 85+
• Node.js 15+

对于旧版环境，可以使用Babel等转译工具进行转换。

总结

ES12的逻辑赋值运算符提供了更简洁的语法来处理常见的条件赋值模式，使代码更加简洁易读。它们特别适合用于设置默认值、条件性赋值和对象属性初始化等场景。理解这些运算符的行为差异（特别是 ||= 和 ??= 的区别）对于正确使用它们至关重要。