JavaScript 的 ??= 运算符：让默认值更简单

JavaScript 新技能：用 ??= 运算符简化默认值处理

在开发中，我们经常需要为变量设置默认值，而 JavaScript 的 ??= 运算符（空值合并赋值运算符）让这一任务变得更加简单且优雅。它是 ECMAScript 2021（ES12）新增的功能，用于在变量的值为 null 或 undefined 时赋值，语法简洁，非常适合日常开发。

---

什么是 ??= 运算符？

简单来说，??= 是一个“只管空值的赋值器”。
当变量的值是 null 或 undefined 时，??= 会给它赋一个默认值。如果变量已经有值（即使是 0、false 或空字符串 ""），它不会改变。

---

使用示例

看看传统方法和 ??= 的对比：

传统方法（2021 年之前的写法）：

if (user.name === null || user.name === undefined) {
  user.name = '匿名';
}

使用 ?? 运算符（稍微简化）：

user.name = user.name ?? '匿名';

使用 ??=（2021 年后的推荐写法）：

user.name ??= '匿名';

优势：精准处理空值，不误伤有效数据

和其他常见方法相比，??= 的好处是“只改空值，其他值一律不动”。下面通过例子来看看它的独特之处：

1. 避免覆盖合法的“假值”

用 || 运算符处理默认值时，0、false 和 ""（空字符串）会被视为没有值，从而被替换掉，而实际这些值往往是有效的：

let score = 0;
score = score || 100;  // 用 || 替换后，score 变成 100

用 ??= 就可以精准保留这些值：

let score = 0;
score ??= 100;  // score 保持 0

2. 表达简洁，减少代码量

以往需要多行代码或者复杂的条件判断，使用 ??= 可以一行解决：

// 原来的写法（if 语句）
if (user.name === null || user.name === undefined) {
  user.name = '匿名';
}

// 现在的写法（??=）
user.name ??= '匿名';

3. 更清晰的逻辑

三元表达式虽然灵活，但表达稍复杂时，代码会变得难以阅读。相比之下，??= 简洁直观：

// 用三元表达式
user.name = user.name === null || user.name === undefined
  ? '匿名'
  : user.name;

// 用 ??=
user.name ??= '匿名';

---

实用场景：数据初始化与用户输入处理

??= 运算符特别适合以下场景：

1. 初始化数据：
   在给定默认值时避免覆盖有效的“假值”。

   let tag = '';
   tag ??= '默认标签';  // 保留空字符串
   

2. 处理用户输入：
   避免不小心将合法值替换为默认值。

   let active = false;
   active ??= true;  // 保留 false
   

---

总结

??= 运算符是 JavaScript 中处理默认值的新利器，语法简单，逻辑清晰，让你的代码更易读且不易出错。对于需要处理空值（null 或 undefined）的场景，??= 是一个非常精准的选择，同时还能避免覆盖有效数据。以后在写代码时，试着用 ??= 替代繁琐的判断语句，你会感受到开发效率的提升！

原文地址：https://blog.csdn.net/2303_76218115/article/details/144249848

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！