掌握 JavaScript 中的 ??= 运算符：优雅处理 null 和 undefined 值

nullish 合并赋值运算符 ??= 是 JavaScript 中相对较新的一个特性。它在 ECMAScript 2021（ES12）中作为“逻辑赋值运算符”提案的一部分被正式引入。

可以将 ??= 看作是变量的智能守护者。它只在当前值为 null 或 undefined 时，才会将新值赋给变量。

// Old way (pre-2021)
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// Or using the nullish coalescing operator (??)
user.name = user.name ?? 'Anonymous';

// New way (ES2021 and later)
user.name ??= 'Anonymous';

当您编写代码如 user.name ??= 'Anonymous' 时，nullish 合并赋值运算符 ??= 首先会检查 user.name 是否为 null 或 undefined。

• 如果 user.name 的值为 null 或 undefined，那么它会被赋值为 'Anonymous'。
• 如果 user.name 已经有一个值，哪怕是空字符串或 0，user.name 的值将保持不变，不会进行赋值操作。

为何 ??= 优于其他替代方案

在 ??= 出现之前，我们有几种处理默认值的方法，但每种方法都有其缺点。比较以下这些方法：

// Using if statement - verbose and repetitive
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// Using || operator - catches too much
user.name = user.name || 'Anonymous';  // Replaces '', 0, false too

// Using ternary - gets messy with longer expressions
user.name = user.name === null || user.name === undefined
  ? 'Anonymous'
  : user.name;

// Using ??= - clean and precise
user.name ??= 'Anonymous';

??= 运算符为我们提供了前所未有的精确控制。它仅在我们确实遇到 null 或 undefined 时才会触发赋值，这使得它非常适合那些0、''或 false 被视为有效数据的场景：

let score = 0;
score ??= 100;    // Keeps 0

let tag = '';
tag ??= 'default'; // Keeps empty string

let active = false;
active ??= true;   // Keeps false

这种精确性有助于避免在使用更宽泛的检查时可能引发的错误。在构建用户界面或处理表单数据时，通常需要保留诸如0、''或 false 这样的假值，而不是用默认值将它们覆盖。

原文地址：https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator