JavaScript ?? 运算符详解

在 JavaScript 中，?? 是 空值合并运算符 （Nullish Coalescing Operator）。它用于处理 null 和 undefined 值，并提供一个默认值。

1. 基本语法

let result = value1 ?? value2;

• 如果 value1 不是 null 或 undefined，则返回 value1。
• 如果 value1 是 null 或 undefined，则返回 value2。

2. 空值合并运算符的工作原理

与 逻辑或 (||) 运算符 不同，空值合并运算符只会考虑 null 和 undefined ，而不会将其他假值（如 false、0、NaN、"" 空字符串等）视为需要替代的值。

示例：

let a = null;
let b = 5;
let c = undefined;
let d = 0;

console.log(a ?? b);  // 5，因为 a 是 null
console.log(c ?? b);  // 5，因为 c 是 undefined
console.log(d ?? b);  // 0，因为 d 不是 null 或 undefined，而是 0

比较 ?? 与 ||

let x = 0;
let y = 10;

console.log(x || y);  // 10，因为 x 是假值（0）
console.log(x ?? y);  // 0，因为 x 不是 null 或 undefined

在上面的例子中：

• 使用 || 时，x 的值为 0，它被视为假值，所以返回了 y（即 10）。
• 使用 ?? 时，x 是 0，它不是 null 或 undefined，所以返回了 0。

3. 使用空值合并运算符的场景

• 提供默认值： 当一个值可能为 null 或 undefined 时，可以用 ?? 来提供一个默认值。

  let userAge = null;
  let defaultAge = 18;
  
  let age = userAge ?? defaultAge;
  console.log(age);  // 18，因为 userAge 是 null

• 避免无效值： 当你有多个潜在的 null 或 undefined 值时，可以使用空值合并运算符来选择第一个有效值。

  let firstName = null;
  let lastName = undefined;
  let defaultName = "Anonymous";
  
  let name = firstName ?? lastName ?? defaultName;
  console.log(name);  // "Anonymous" 因为 firstName 和 lastName 都是 null 或 undefined

4. 空值合并与可选链（?.）结合使用

空值合并运算符和可选链（?.）结合使用时，能够更安全地访问对象的属性，并且提供一个默认值。

示例：

let user = { name: "Alice" };

let userAge = user?.age ?? 18;
console.log(userAge);  // 18，因为 user 对象中没有 `age` 属性，所以返回默认值 18

在这个例子中，?. 用于安全地访问 user.age，如果 age 不存在，它返回 undefined，然后 ?? 提供默认值 18。

5. 空值合并运算符与其他运算符的优先级

?? 的优先级较低，因此，在表达式中使用时，通常需要加上括号来避免运算顺序错误。

示例：

let a = null;
let b = 10;

console.log(a ?? b * 2);  // 20，因为先执行乘法运算，再进行空值合并
console.log((a ?? b) * 2);  // 20，先进行空值合并，再执行乘法运算

6. 兼容性

空值合并运算符（??）在 ECMAScript 2020（ES11）中被引入，因此在较旧的 JavaScript 环境中可能不被支持。如果你需要兼容较旧的浏览器或环境，可以使用 Babel 等工具进行转译。

总结：

• ?? 运算符用于提供一个默认值，当其左侧的值为 null 或 undefined 时，返回右侧的默认值。
• 它不会像 || 运算符那样将其他"假值"当作 null 或 undefined 处理，因此可以避免一些意外的行为。
• 在实际开发中，它主要用于处理可能为 null 或 undefined 的值，并为其提供一个更合理的默认值。