空值连接运算符 ‘??’

在本文中，我们所指的“区域”一词的值不是 null 或 undefined。

空值合并运算符被写为两个问号??。

a ?? b的结果是：

• 如果指定了a，则答案为a，
• 如果未指定a，则答案为b。

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

空合并运算符并不是什么新鲜事。这是一个很好的语法，可以从两个值中获取第一个“定义”值。

我们可以使用我们已经知道的运算符重写result = a ?? b，如下所示：

result = (a !== null && a !== undefined) ? a : b;
复制代码

?? 通常用于为可能未定义的变量提供默认值。

例如，此处，如果未指定user，则显示Anonymous：

let user;

alert(user ?? "Anonymous"); // Anonymous
复制代码

当然，如果user的值只有null/undefined，那么我们会看到：

let user = "John";

alert(user ?? "Anonymous"); // John
复制代码

我们还可以使用序列??从多个值中选择第一个不是null/undefined的值。

假设我们将用户的数据存储在圆圈firstName、lastName或nickName中。如果用户决定不输入值，则所有这些变量的值都可能是未定义的。

我们希望使用这些变量之一显示用户名，如果所有这些变量的值未定义，则显示“匿名”。

让我们使用 ?? 运算符来实现此条件：

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个已定义的值
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
复制代码

将

与 || 进行比较

或 || 运算符的使用方式与 ?? 相同。正如前一章所讨论的。

例如，在上面的代码中，我们可以将??替换为||，并得到相同的结果：

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个真值：
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder
复制代码

或 || 运算符自 JavaScript 诞生以来就一直存在，因此开发人员长期以来一直将其用于此目的。

空合并运算符 ?? 最近被引入到 JavaScript 中，因为人们对 || 不太满意。

它们之间的主要区别是：

• || 返回第一个 true 值。
• ?? 返回第一个指定的 值。

换句话说，我们无法区分false、0、空字符串""、100和

。它们都是一样的——错误的价值观。如果其中任何一个是 || 的第一个参数，我们将得到第二个结果。

但是，在实践中，我们可能只想在变量值为null/undefined时才使用默认值。也就是说，当该值未知或未设置时。

例如，考虑以下情况：

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0
复制代码

• height || 100首先检查height是否为假值，发现为假。
  • 因此，结果是第二个参数100。
• height ?? 100首先检查height是否是null/undefined，发现不是。
  • 因此，输出为height、0的原始值。

如果高度0是有效值，则不应将其替换为默认值，因此??将给出正确的结果。

优先

运算符

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

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

否则，如果省略括号，由于* 的优先级高于??，因此会先执行，导致结果不正确。

// 没有括号
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
复制代码

总结

• 空合并运算符 ?? 提供了一种从列表中选择第一个“定义”值的便捷方法。 它用于为变量分配默认值： // 当 height 的值为 null 或 undefined 时，将 height 的值设置为 100 height = height ?? 100; 复制代码
• 运算符??的等级很低，仅比?和=略高，因此在表达式中使用时请考虑添加括号。
• 如果没有明确的括号，则不能将其与 || 或 && 一起使用。

第一个链接：https://juejin.im/post/6884019851942166536