什么是 Coalescing Operator？

什么是 Coalescing Operator

Coalescing 运算符是一种 JavaScript 表达式，用于通过提供默认值来处理可能的 null 或 undefined 值，这种运算符在逻辑上类似于 “OR” 运算符。 该运算符可以用 ?? 表示，被称为 “nullish coalescing operator”。

举个例子：

const name = null ?? "defaultName";
console.log(name); // "defaultName"

const age = 0 ?? 24;
console.log(age); // 0

在上述代码中，null 和 0 都是 falsy 值，但是 ?? 运算符可以正确处理这些边界情况。

怎么使用

使用 Coalescing 运算符非常简单：只需要在两个可能值的中间放置两个问号 ??，然后将默认值放在第二个问号后面即可。

下面是一个示例：

const foo = null ?? "bar";
console.log(foo); // "bar"

在这个示例中，变量 foo 的值是 null。但是，由于使用了 Coalescing 运算符，所以该语法会返回一个具有默认值 “bar” 的值。

应用场景

Coalescing 运算符可用于处理收到的数据，特别是来自 API 的数据。有时，API 可能会返回一些空值，这可能会使您的代码出现问题。 下面是一些常见的用例。

1. 提供默认值
   Coalescing 运算符最常见的目的是为可能为空的值提供默认值。

const greeting = userGreeting ?? "Hello, world!";
console.log(greeting);

在上述示例中，如果 userGreeting 的值未定义，则 ?? 运算符将返回默认值 “Hello, world!”。

2. 与 Optional Chaining 运算符一起使用
   与 Optional Chaining 运算符一起使用，可以轻松处理嵌套属性。

const user = {
  name: "Lucy",
  address: {
    city: "New York",
  },
};

const city = user?.address?.city ?? "unknown";
console.log(city); // "New York"

在上述示例中，Optional Chaining 运算符 ?. 用于在 address 属性上进行安全访问。 如果 city 属性不存在，则 ?? 运算符将返回默认值 “unknown”。

3. 检查变量是否已定义
   在某些情况下，可能需要检查变量是否已定义。您可以使用 Coalescing 运算符来检查变量是否具有值。

const myVar = null;

console.log(typeof myVar !== "undefined" ?? "myVar is defined");
console.log(typeof anotherVar !== "undefined" ?? "anotherVar is defined");

在上述示例中，如果 myVar 未定义，则 ?? 运算符返回 falsy 值 false。 如果变量存在，则返回 true 并输出消息。

4. 处理数字和字符串
   可以使用 Coalescing 运算符来处理数字和字符串。 如果 null 或 undefined 值是数字，则运算符将返回 0，如果它是字符串，那么它将返回空字符串。

let number = 5;
number = null ?? 0;
console.log(number);

let str = "";
str = undefined ?? "";
console.log(str);

在上述示例中，如果变量为 falsy，运算符将返回默认值。

5. 确认函数是否存在
   可以使用 Coalescing 运算符来执行函数是否存在的检查。

function someFunc() {
  console.log("this function exists");
}

const callFunc = anotherFunc ?? someFunc;