前端小知识：??= 操作符，更简洁的默认值处理方式

前端达人

发布于 2024-11-25 12:44:08

18900

代码可运行

文章被收录于专栏：前端达人前端达人

运行总次数：0

代码可运行

在日常开发中，我们经常需要为变量设置默认值，比如用户配置、表单初始值等。JavaScript 在 ECMAScript 2021（ES12）中引入的 ??= 操作符提供了一种更简洁的方案。作为“逻辑赋值操作符”的一部分，它不仅能让代码更清晰，还能避免误替换掉有效数据。

什么是 `??=` 操作符？

简单来说，??= 是一个“智能守护者”：仅当变量的值为 null 或 undefined 时才会赋予它一个默认值，而不会影响 0、false、'' 等有效的“假值”。

使用对比

先看看传统做法和 ??= 的对比：

// 传统方法：通过 if 语句检查和赋值
if (user.name === null || user.name === undefined) {
  user.name = '访客';
}

// 使用 ??= 简化后的代码
user.name ??= '访客';

在这里，user.name ??= '访客' 只会在 user.name 为 null 或 undefined 时赋值为 '访客'，否则保留现有值。相比传统写法，代码简洁了许多，也更清晰。

`??=` 的典型业务应用场景

在实际业务中，我们经常需要处理默认值赋值的场景,在社交平台中，未设置用户名的用户可能需要显示“访客”。利用 ??= 可以避免多余判断，让代码简洁易读：

function setDefaultUsername(user) {
  user.username ??= '访客';
}

let userProfile = { username: null };
setDefaultUsername(userProfile);
console.log(userProfile.username); // 输出: 访客

userProfile = { username: '小明' };
setDefaultUsername(userProfile);
console.log(userProfile.username); // 输出: 小明

这里，user.username ??= '访客' 会检查 username 是否为 null 或 undefined。如果是，则赋值为“访客”；否则保留原有值。非常适合在用户系统中设置默认显示名。

为什么选择 `??=` ？

在 ??= 出现之前，我们有几种方法可以设置默认值，但每种方式都有其缺点：

// 使用 if 语句 - 繁琐且重复
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// 使用 || 运算符 - 覆盖太多
user.name = user.name || 'Anonymous';  // 会替换 '', 0, false 等有效值

// 使用三元运算符 - 表达式冗长且难以阅读
user.name = user.name === null || user.name === undefined
  ? 'Anonymous'
  : user.name;

// 使用 ??= - 简洁、精确
user.name ??= 'Anonymous';

??= 的优势在于它的精确性。仅当变量真的是“没有值”时（即 null 或 undefined），它才会赋予默认值，因此适用于保留有效的 0、空字符串或 false 等“假值”数据：

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

let tag = '';
tag ??= 'default'; // 仍然保持空字符串

let active = false;
active ??= true;   // 仍然保持 false

这种精确性能够有效避免使用更宽泛检查带来的潜在问题。在构建用户界面或处理表单数据时，我们通常希望保留这些“假值”而不是将它们替换为默认值。

`||`、`&&` 与 `??` 的适用场景

在 JavaScript 中，我们还可以使用 || 和 && 处理默认值，但它们的适用场景不同：

||：当变量值是所有“假值”（null、undefined、0、false、'' 等）时都会触发，可以快速设置默认值，但可能会覆盖有效数据。
&&：用于在两个条件都成立的情况下进行赋值操作，多用于复杂条件判断。
?? 和 ??=：仅在值为 null 或 undefined 时触发，因此特别适合保留 0、false、空字符串等有效数据。