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

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

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

什么是Nullish合并运算符

Nullish合并运算符（??）是ES2020引入的一个新特性，它提供了一种简洁的方式来处理变量值为null或undefined时的默认值设置问题。这个运算符特别适合在需要区分"空值"（null/undefined）和"假值"（如0、空字符串等）的场景中使用。

基本语法和工作原理

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

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

这相当于以下代码的简写形式：

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

实际应用示例

假设我们有一个用户信息显示系统，用户可能有firstName、lastName或nickName，但都不填写也是允许的。我们希望显示第一个有值的名称，如果都没有则显示"匿名用户"：

let firstName = null;
let lastName = null;
let nickName = "JavaScript爱好者";

console.log(firstName ?? lastName ?? nickName ?? "匿名用户"); 
// 输出："JavaScript爱好者"

与OR运算符(||)的关键区别

虽然??和||看起来相似，但它们有本质区别：

• ||返回第一个"真值"（truthy value）
• ??返回第一个"已定义值"（非null且非undefined的值）

这个区别在0、空字符串等"假值"处理时尤为重要：

let count = 0;

console.log(count || 10); // 输出：10（因为0是假值）
console.log(count ?? 10); // 输出：0（因为0不是null/undefined）

运算符优先级与使用注意事项

??的运算符优先级为5，比大多数运算符低但高于赋值运算符和三目运算符。在使用时需要注意：

1. 在复杂表达式中建议使用括号明确优先级：

let area = (height ?? 100) * (width ?? 50);

2. 不能直接与&&或||混用（会报语法错误），必须使用括号：

// 错误写法
let x = 1 && 2 ?? 3; // SyntaxError

// 正确写法
let x = (1 && 2) ?? 3; // 2

适用场景分析

??最适合以下场景：

1. 需要区分0/""和null/undefined的情况
2. 设置变量默认值但保留有效假值
3. 配置项合并，保留有效配置

总结

Nullish合并运算符是JavaScript中处理默认值的现代解决方案，它填补了||运算符在处理假值时的不足。理解并合理使用??可以让代码更加精确和可读，特别是在需要区分空值和假值的业务逻辑中。记住它的两个关键特点：只关心null/undefined，以及相对较低的运算符优先级。

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info