JavaScript教程：深入理解Nullish合并运算符(??)

JavaScript教程：深入理解Nullish合并运算符(??)

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

什么是Nullish合并运算符

Nullish合并运算符（??）是JavaScript中一个相对较新的运算符，它由两个问号组成。这个运算符的主要作用是提供一种简洁的方式来处理可能为null或undefined的值。

基本用法

a ?? b的运算规则非常简单：

1. 如果a不是null也不是undefined，则返回a
2. 否则，返回b

这相当于以下表达式的简写：

result = (a !== null && a !== undefined) ? a : b;

实际应用场景

默认值设置

最常见的用法是为变量提供默认值：

let username;
console.log(username ?? "匿名用户"); // 输出"匿名用户"

当变量有值时：

let username = "张三";
console.log(username ?? "匿名用户"); // 输出"张三"

多值选择

我们可以串联多个??运算符来选择第一个非null/undefined的值：

let firstName = null;
let lastName = null;
let nickName = "超级程序员";
let displayName = firstName ?? lastName ?? nickName ?? "匿名用户";
console.log(displayName); // 输出"超级程序员"

与逻辑或(||)的区别

虽然??和||在某些情况下表现相似，但它们有本质区别：

• ||返回第一个"真值"(truthy)
• ??返回第一个"已定义值"(非null/undefined)

关键差异示例

let count = 0;
console.log(count || 10); // 输出10，因为0是假值
console.log(count ?? 10); // 输出0，因为0不是null/undefined

这个例子清楚地展示了为什么??在某些场景下更合适。当我们希望保留0、false或空字符串等有效值时，??比||更符合预期。

运算符优先级

??的优先级与||相同，在MDN的运算符优先级表中都属于第3级。这意味着：

• 它比大多数算术运算符（如+、*）的优先级低
• 比赋值运算符=和三元运算符?的优先级高

优先级示例

let height = null;
let width = null;
let area = (height ?? 100) * (width ?? 50); // 必须使用括号
console.log(area); // 输出5000

如果不使用括号，由于乘法优先级更高，会导致意外结果。

使用限制

出于安全考虑，JavaScript不允许在没有明确括号的情况下将??与&&或||一起使用：

let x = 1 && 2 ?? 3; // 语法错误
let y = (1 && 2) ?? 3; // 正确写法，输出2

这个限制是为了避免开发者从||迁移到??时可能出现的错误。

何时使用Nullish合并运算符

建议在以下场景使用??：

1. 当你想为变量设置默认值，但希望保留0、false或空字符串等有效值时
2. 当你明确只想检查null/undefined，而不是所有假值时
3. 在处理可能未初始化的变量或可选参数时

总结

Nullish合并运算符??是JavaScript中处理null/undefined值的强大工具。它比传统的||运算符更精确，能够区分"未定义"和"假值"的情况。理解并正确使用这个运算符可以让你的代码更加健壮和可读。

记住它的核心特点：

• 只关心值是否为null/undefined
• 优先级较低，使用时通常需要括号
• 不能与&&或||混用而不加括号

掌握了??运算符，你将能够更优雅地处理JavaScript中的空值情况。

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info