从 ES11 中 Nullish Coalescing 和 Optional Chaning 两个特性的使用

ES11（即 ES2020）是 ECMAScript 的最新版本，引入了许多新特性和改进。其中，Nullish Coalescing 和 Optional Chaning 两个特性是前端开发中最实用的功能之一。这篇文章将详细介绍这两个特性，并提供示例代码。

Nullish Coalescing（空值合并）

Nullish Coalescing 是一种用于 JavaScript 中处理空值（null 或 undefined）的新运算符。在之前的版本中，我们通常使用逻辑运算符 || 来处理空值，例如：

const foo = null || "default value";
console.log(foo); // 输出："default value"

但是，当我们使用 || 运算符时，可能会导致一些问题。例如：

const foo = "" || "default value";
console.log(foo); // 输出："default value"

这是因为，"" 的布尔值为 false，所以 || 运算会返回 "default value"。但是，"" 并不是空值，因此这可能会导致意外的结果。

Nullish Coalescing 运算符 ?? 解决了这个问题。它仅在变量值为 null 或 undefined 时才返回默认值，例如：

const foo = null ?? "default value";
console.log(foo); // 输出："default value"

const bar = "" ?? "default value";
console.log(bar); // 输出：""

Nullish Coalescing 运算符 ?? 与逻辑运算符 || 的区别在于，空字符串和数字 0 等值并不会触发默认值的返回。只有 null 或 undefined 才能触发。

Optional Chaning（可选链）

Optional Chaning 是一种用于 JavaScript 中访问对象属性的新语法。在之前的版本中，我们通常使用条件语句来检查对象属性是否存在，例如：

const data = {
  user: {
    name: "Alice",
    age: 30
  }
};

if (data && data.user && data.user.name) {
  console.log(data.user.name); // 输出："Alice"
}

这非常麻烦，尤其是当我们需要访问多层嵌套的属性时。Optional Chaning 极大地简化了这个过程。它允许您使用 ?. 语法来访问可能不存在的对象属性，例如：

const name = data?.user?.name;
console.log(name); // 输出："Alice"

const address = data?.user?.address?.city;
console.log(address); // 输出：undefined

使用可选链 ?. 时，如果访问的属性值不存在，则返回 undefined。这比手动检查每个属性是否存在要简单得多。

总结

Nullish Coalescing 和 Optional Chaning 两个特性是在 ES11 中非常实用的功能。Nullish Coalescing 运算符 ?? 用于处理空值，而 Optional Chaning ?. 用于访问可能不存在的对象属性。它们在处理实际问题时非常好用，可以大大简化代码并提高代码质量。

示例代码

以下是使用 Nullish Coalescing 和 Optional Chaning 的示例代码：

// Nullish Coalescing 示例
const defaultValue = "default value";
const foo = null ?? defaultValue;
console.log(foo); // 输出："default value"

const bar = "" ?? defaultValue;
console.log(bar); // 输出：""

// Optional Chaning 示例
const data = {
  user: {
    name: "Alice",
    age: 30
  }
};

const name = data?.user?.name;
console.log(name); // 输出："Alice"

const address = data?.user?.address?.city;
console.log(address); // 输出：undefined

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65955184eb4cecbf2d9809e3