JS空值合并操作符：为 null/undefined 提供默认值

学习空值合并操作符 ?? 的用法，区分它与逻辑或 || 的区别，并掌握如何为可能为 null 或 undefined 的变量设置安全的默认值。 · 难度：入门 · +15XP

什么是空值合并操作符？

空值合并操作符 ?? 是一个逻辑操作符，当左侧的操作数是 null 或者 undefined 时，返回其右侧的值，否则返回左侧的值。

基本语法

const result = leftExpression ?? rightExpression;

与 || 的区别

逻辑或操作符 || 会在左侧为 假值（如 false、0、''、null、undefined、NaN）时返回右侧值。而 ?? 只会在左侧为 null 或 undefined 时才返回右侧值。

实际应用

// 用户配置可能缺失
const config = {
  theme: null,
  volume: 0,
  name: ""
};
// 使用 ?? 保留 0 和 '' 等有效值
const theme = config.theme ?? "light";
const volume = config.volume ?? 50;
const name = config.name ?? "匿名用户";
console.log(theme, volume, name); // "light" 0 ""

与可选链结合

const user = {};
const displayName = user?.profile?.name ?? "访客";
console.log(displayName); // "访客"

注意事项

• 不能与 || 或 && 直接组合使用，除非使用括号明确优先级。
• 常用于函数参数默认值、配置项合并等场景。

练习提示

修改 userInput 的值为 0 或空字符串，观察 ?? 与 || 输出的不同。