掌握 JavaScript 中的 ??= 運算符：優(yōu)雅處理 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 已經(jīng)有一個值，哪怕是空字符串或 0，user.name 的值將保持不變，不會進行賦值操作。

為何 ??= 優(yōu)于其他替代方案

在 ??= 出現(xiàn)之前，我們有幾種處理默認值的方法，但每種方法都有其缺點。比較以下這些方法：

// 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 時才會觸發(fā)賦值，這使得它非常適合那些0、''或 false 被視為有效數(shù)據(jù)的場景：

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

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

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

這種精確性有助于避免在使用更寬泛的檢查時可能引發(fā)的錯誤。在構建用戶界面或處理表單數(shù)據(jù)時，通常需要保留諸如0、''或 false 這樣的假值，而不是用默認值將它們覆蓋。

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