什么是空值合并运算符（??）？

在JavaScript中，我们经常需要为一个可能为null或undefined的变量提供默认值。传统的做法是使用逻辑或运算符||，但它有一个明显的缺陷：它会将所有的假值（如''、0、false）也视为无效值。空值合并运算符??是ES2020引入的，它专门用于精确地检测null和undefined，提供了一种更严格、更可控的默认值设置方式。

精确检测null和undefined

??操作符的逻辑很简单：如果其左侧的操作数为null或undefined，则返回右侧的操作数；否则，返回左侧的操作数。

const defaultValue = '默认值';

let value1 = null;
let value2 = undefined;
let value3 = 0;
let value4 = '';

console.log(value1 ?? defaultValue); // '默认值'
console.log(value2 ?? defaultValue); // '默认值'
console.log(value3 ?? defaultValue); // 0
console.log(value4 ?? defaultValue); // ''

可以看到，对于value3（值为0）和value4（值为空字符串''），??操作符认为它们是有效的值，因此返回了左侧的0和''，而不是右侧的默认值。这与||运算符的行为形成了鲜明对比。

与||运算符的关键区别

逻辑或运算符||会检查左侧操作数是否为“假值”。在JavaScript中，假值包括：false、0、''、null、undefined和NaN。这在很多期望保留这些有效值的场景下会导致问题。

const count = 0;
const displayCount = count || '未设置'; // 错误地将0替换了
console.log(displayCount); // '未设置'

const name = '';
const displayName = name || '匿名'; // 错误地将空名替换了
console.log(displayName); // '匿名'

// 使用 ?? 可以正确处理这些有效假值
console.log(count ?? '未设置'); // 0
console.log(name ?? '匿名'); // ''

因此，当你需要严格区分“未定义/空值”和“有效的假值（如0、空字符串）”时，??是唯一正确的选择。

结合可选链使用

??运算符与可选链操作符?.是天作之合。你可以安全地访问深层属性，并在最终结果为null或undefined时提供回退值。

const user = {
  settings: {
    theme: null
  }
};
const theme = user?.settings?.theme ?? 'light';
console.log(theme); // 'light'，因为 theme 是 null

这行代码的含义是：安全地尝试获取user.settings.theme，如果路径中任何一环不存在或最终值为null/undefined，则使用默认值‘light’。这种组合让代码既安全又富有表达力。

运算符优先级与注意事项

??的优先级相对较低，仅高于=和? :三元运算符，但低于大多数其他运算符（如+、*、&&、||）。在复杂表达式中使用它时，建议使用括号来明确优先级。

const x = null;
const y = 5;
const result = (x ?? 0) + y; // 使用括号是良好的实践
console.log(result); // 5

另外，??不能直接与&&或||运算符在没有括号的情况下共用，因为这种语法不明确，会导致运行时错误。如果需要组合使用，必须用括号明确分组。

在现代JavaScript开发中，??已成为设置默认值的标准方式，因为它能更精确地反映开发者的意图，避免由||引起的细微错误。尤其在处理数字、字符串或布尔值等可能包含有效假值的数据时，它的优势无可替代。