JavaScript 中的 ?? 运算符，你真的了解吗？

前端

2023-09-03 05:00:27

前言

今天偶然看到一段 JavaScript 代码中使用了 ?? 运算符，当时就有点纳闷了：JavaScript 中还有这玩意？

还记得在学习 Dart 语法时也有 ?? 逻辑运算符，没管那么多，直接使用，毕竟当时在学习的新语言中，有新玩意就赶紧用嘛。

可 JavaScript，这门我不怎么想深入学习的语言，居然也会有这个东西？可见它的应用还是挺广泛的，不然也不可能这么幸运地被我撞见。

刚好有这个机会就研究一下，相信它可以解决不少痛点，所以整理了这篇文章，如有收获，还望一键三连。

正文

运算符基本介绍

JavaScript 中的 ?? 运算符是一个逻辑运算符，它用于检查左操作数是否为 null 或 undefined，如果是，则返回右操作数的值。?? 运算符的优先级高于 && 和 || 运算符，因此它可以嵌套在这些运算符中。

语法格式如下：

let result = leftOperand ?? rightOperand;

其中：

leftOperand：要检查是否为 null 或 undefined 的值。
rightOperand：如果 leftOperand 为 null 或 undefined，则返回的值。

示例：

let name = "John Doe";
let fullName = name ?? "Anonymous";

console.log(fullName); // "John Doe"

示例 2：

let age = null;
let defaultAge = 18;

let validAge = age ?? defaultAge;

console.log(validAge); // 18

运算符的应用

?? 运算符可以用于各种场景，这里列举一些最常见的用法：

默认值赋值： 可以使用 ?? 运算符来为变量赋值默认值，例如：

let name = "John Doe";
let fullName = name ?? "Anonymous";

console.log(fullName); // "John Doe"

可空类型注解： 可以使用 ?? 运算符来标注可空类型，例如：

function getName(user: { name: string | null }): string {
  return user.name ?? "Anonymous";
}

let user = { name: "John Doe" };

let fullName = getName(user);

console.log(fullName); // "John Doe"

嵌套逻辑运算符： 可以使用 ?? 运算符来嵌套逻辑运算符，例如：

let age = 20;
let isAdult = age >= 18 ? true : age >= 13 ? "Teenager" : "Child";

console.log(isAdult); // "true"

运算符与其他运算符的比较

与三元运算符： ?? 运算符与三元运算符（?:）非常相似，它们都可以用于默认值赋值。然而，?? 运算符的语法更简洁，而且它可以嵌套在其他逻辑运算符中。
与 || 运算符： ?? 运算符与 || 运算符也相似，它们都可以用于求逻辑或。然而，?? 运算符的优先级高于 || 运算符，因此它可以嵌套在 || 运算符中。
与 && 运算符： ?? 运算符与 && 运算符也相似，它们都可以用于求逻辑与。然而，?? 运算符的优先级高于 && 运算符，因此它可以嵌套在 && 运算符中。