你所不知的 JavaScript 空值合并操作符 ??

JavaScript 空值合并操作符 ?? 简介

空值合并操作符（??） 是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回其右侧操作数，而空值合并操作符仅在左侧操作数为 null 或者 undefined 时才返回其右侧操作数。

JavaScript 空值合并操作符 ?? 的用法

空值合并操作符 ?? 的用法非常简单，只需将两个操作数放在 ?? 两侧即可。如果左侧操作数不为 null 或 undefined，则返回左侧操作数；否则，返回右侧操作数。例如：

const name = null;
const displayName = name ?? "Guest";

console.log(displayName); // Guest

在这个例子中，name 为 null，因此 displayName 的值取自右侧操作数 "Guest"。

JavaScript 空值合并操作符 ?? 的好处

空值合并操作符 ?? 有许多好处，包括：

• 代码更简洁：使用空值合并操作符 ?? 可以使代码更简洁，因为无需再使用 if-else 或三元运算符来处理 null 或 undefined 值。
• 代码更易读：使用空值合并操作符 ?? 可以使代码更易读，因为可以一目了然地看出当左侧操作数为 null 或 undefined 时，应该返回哪个值。
• 代码更安全：使用空值合并操作符 ?? 可以使代码更安全，因为可以防止出现因 null 或 undefined 值导致的错误。

JavaScript 空值合并操作符 ?? 的注意事项

使用空值合并操作符 ?? 时，需要注意以下几点：

• 空值合并操作符 ?? 仅在左侧操作数为 null 或 undefined 时才返回其右侧操作数，因此，如果左侧操作数为其他假值，则返回左侧操作数。例如：

const age = 0;
const realAge = age ?? 18;

console.log(realAge); // 0

在这个例子中，age 为 0，因此 realAge 的值取自左侧操作数 0，而不是右侧操作数 18。

• 空值合并操作符 ?? 具有短路求值特性，即如果左侧操作数不为 null 或 undefined，则不会计算右侧操作数。这在某些情况下可能导致意外的结果。例如：

const name = null;
const displayName = name ?? function() {
  throw new Error("Error!");
};

console.log(displayName); // Error: Error!

在这个例子中，name 为 null，因此 displayName 的值取自右侧操作数，即一个会抛出错误的函数。如果我们不使用空值合并操作符 ??，而是使用 if-else 语句，则不会出现这个问题。

结语

JavaScript 空值合并操作符 ?? 是一个非常有用的逻辑操作符，可以使代码更简洁、易读和安全。在使用空值合并操作符 ?? 时，需要注意其短路求值特性，并避免在左侧操作数不为 null 或 undefined 时使用它来调用可能产生副作用的函数。