ES2020 让代码更优美的运算符 (?.) (??) 😍✨

2023-11-20 20:30:51

ES2020 的代码美化运算符：?. 和 ??

在 ES2020 中，引入了两个新的运算符：?. 和 ??，它们可以帮助我们编写更优美、更简洁的代码。

1. ?. 运算符 - 可选链操作符

?. 运算符又称为可选链操作符。它允许我们在不检查对象是否存在的情况下访问对象的属性。如果对象存在，则返回属性的值；如果对象不存在，则返回 undefined。

例如，我们有如下代码：

const user = {
  name: "John Doe",
  address: {
    city: "New York",
    state: "NY",
  },
};

// 使用传统的写法来访问对象的属性
console.log(user.address.city); // "New York"

// 使用可选链操作符来访问对象的属性
console.log(user?.address?.city); // "New York"

// 如果对象不存在或属性不存在，则返回 undefined
const nonExistingUser = null;
console.log(nonExistingUser?.address?.city); // undefined

2. ?? 运算符 - 空值合并运算符

?? 运算符又称为空值合并运算符。它允许我们在两个值之间进行比较，并返回第一个非空值。如果两个值都为空，则返回最后一个值。

例如，我们有如下代码：

const name = null;
const defaultName = "John Doe";

// 使用传统的写法来处理空值
const fullName = name || defaultName;

// 使用空值合并运算符来处理空值
const fullName = name ?? defaultName;

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