空值合并运算符 ??

空值合并运算符（nullish coalescing operator）的写法为两个问号 ??。

TIP

本文中，我们将值既不是 null 也不是 undefined 的表达式称为已定义的（defined）。

我们来看看执行的结果，a ?? b 的结果是：

换句话说也就是,如果第一个参数不是 null、undefined，则 ?? 返回第一个参数。否则，返回第二个参数。

换做以前的写法也就是:

result = a !== null && a !== undefined ? a : b;

使用场景

通常 ?? 的使用场景是，为可能是未定义的变量提供一个默认值。

比如，由于 user 没有定义赋值一个默认值。

(function() {
  let user;

  return user ?? "Jack"; // Jack
})();

当然，如果 user 的值为除 null、undefined 外的任意值，那么我们看到的将是它：

(function() {
  let user = "";

  return user ?? "Jack"; // 空字符串
})();

某些场景下或运算符 || 可以以与 ?? 运算符相同的方式使用。

例如上面的代码:

(function() {
  let user;

  return user || "Jack"; // Jack
})();

还是上面的那个例子，假如我们改成或运算符的写法，就会得到不一样的结果:

(function() {
  let user = "";

  return user || "Jack"; // Jack
})();

TIP

换句话说，|| 无法区分 false、0、空字符串"" 和 null、undefined。它们都一样 —— 假值（falsy values）。如果其中任何一个是 || 的第一个参数，那么我们将得到第二个参数作为结果。

不过在实际中，我们可能只想在变量的值为 null、undefined 时使用默认值。也就是说，当该值确实未知或未被设置时。

?? 运算符的优先级相当低：在 MDN table 中为 5。因此，?? 在 = 和 ? 之前计算，但在大多数其他运算符（例如，+ 和 *）之后计算。

因此，如果我们需要在还有其他运算符的表达式中使用 ?? 进行取值，需要考虑加括号：

let height = null;
let width = null;

// 重要：使用括号
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

否则，如果我们省略了括号，则由于 * 的优先级比 ?? 高，它会先执行，进而导致错误的结果。

// 没有括号
let area = height ?? 100 * width ?? 50;

// ……与下面这行代码的计算方式相同（应该不是我们所期望的）：
let area = height ?? `(100 * width)` ?? 50;

出于安全原因，JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用，除非使用括号明确指定了优先级。

下面的代码会触发一个语法错误：

let x = 1 && 2 ?? 3; // Syntax error

这个限制无疑是值得商榷的，但它被添加到语言规范中是为了避免人们从 || 切换到 ?? 时的编程错误。

可以明确地使用括号来解决这个问题：

let x = (1 && 2) ?? 3; // 正常工作了

alert(x); // 2