【第3416期】JavaScript的??=运算符：轻松实现默认值

前端早读课 · 公众号 · 前端 · 2024-11-14 08:00

正文

前言

JavaScript 的 ??= 运算符是一个在 ECMAScript 2021 (ES12) 中引入的逻辑赋值运算符，它可以优雅地处理变量的默认值，只在变量为 null 或 undefined 时进行赋值。今日前端早读课文章由 @飘飘翻译分享。

正文从这开始～～

使用 JavaScript 中的 ??= 运算符优雅地处理 null 和 undefined 值的指南

空值合并赋值操作符 ??= 是 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' 这样的代码时，编译器首先检查 user.name 是否为 null 或 undefined 。

如果是 null 或 undefined ，只有在这种情况下才会分配 'Anonymous' — 如果 user.name 已经有其他任何值 - 甚至是空字符串或 0 - 它保持不变。

为什么 `??=` 比其他选择更优？

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

 // 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';

??= 操作符为我们提供了以前没有的精度。它仅在确实没有任何值时才触发，因此非常适合零、空字符串或 false 为有效数据的情况下使用。

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

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

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