探秘 JavaScript 的??= 运算符
|
admin
2024年11月10日 9:31
本文热度 356
|
掌握 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
该文章在 2024/11/11 10:24:07 编辑过