Nullish Coalescing Operator (??) 的作用是什么？

推荐答案

Nullish Coalescing Operator (??) 是 ECMAScript 2020 (ES11) 中引入的一个逻辑运算符，用于检查一个值是否为 null 或 undefined。如果左侧的操作数为 null 或 undefined，则返回右侧的操作数；否则返回左侧的操作数。

const value = null ?? 'default';
console.log(value); // 输出: 'default'

const anotherValue = 0 ?? 'default';
console.log(anotherValue); // 输出: 0

本题详细解读

1. 基本用法

?? 运算符的主要作用是提供一种简洁的方式来处理 null 或 undefined 的情况。与逻辑或运算符 (||) 不同，?? 仅在左侧操作数为 null 或 undefined 时才会返回右侧操作数，而 || 会在左侧操作数为任何假值（如 0, '', false, NaN 等）时返回右侧操作数。

const value1 = 0 || 'default';
console.log(value1); // 输出: 'default'

const value2 = 0 ?? 'default';
console.log(value2); // 输出: 0

2. 适用场景

?? 运算符特别适用于以下场景：

• 默认值设置：当你希望仅在变量为 null 或 undefined 时使用默认值，而不是在所有假值情况下都使用默认值。

  // www.javascriptcn.com code example
  const userSettings = {
    theme: null,
    fontSize: 0
  };
  
  const theme = userSettings.theme ?? 'light';
  const fontSize = userSettings.fontSize ?? 14;
  
  console.log(theme); // 输出: 'light'
  console.log(fontSize); // 输出: 0

• 避免意外行为：在某些情况下，使用 || 可能会导致意外的行为，特别是当 0, '', 或 false 是有效值时。?? 可以避免这些问题。

3. 与 || 的区别

?? 和 || 的主要区别在于它们对假值的处理方式：

• || 会在左侧操作数为任何假值时返回右侧操作数。
• ?? 仅在左侧操作数为 null 或 undefined 时返回右侧操作数。

const value3 = '' || 'default';
console.log(value3); // 输出: 'default'

const value4 = '' ?? 'default';
console.log(value4); // 输出: ''

4. 注意事项

• ?? 不能与 && 或 || 直接混合使用，除非使用括号明确优先级。

  // 错误示例
  const value5 = null || undefined ?? 'default'; // SyntaxError
  
  // 正确示例
  const value6 = (null || undefined) ?? 'default';
  console.log(value6); // 输出: 'default'

• ?? 是 ES2020 的新特性，因此在较旧的 JavaScript 环境中可能不被支持。