JavaScript ES2020：解析如何使用 optional chaining 来访问对象属性-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript ES6 中，引入了新的语法来简化对象属性的访问：对象解构和箭头函数。但是当我们需要在一个非常深的对象层级中访问一个属性时，可能需要使用多个 if 语句或者通过抛出异常来避免访问 null 或 undefined 属性。这样的写法不仅显得冗长而且容易出错。

在 ES2020 中，我们可以使用 Optional Chaining 来简化这样的代码。本文将详细介绍 Optional Chaining 的用法和使用的场景。

什么是 Optional Chaining

Optional Chaining 是一个新的 JavaScript 特性，它允许我们简化访问一个深层对象属性时，需要写的冗长代码。我们可以通过在属性访问路径上加上问号 ? 来表明这条路径上的属性是可选的。

示例：

假如我们有这样一个对象：

const obj = {
  name: "Lucy",
  age: 20,
  address: {
    province: "Guangdong",
    city: "Shenzhen"
  }
};

我们要获取该对象中的 city 属性，可以使用以下的代码：

if(obj && obj.address && obj.address.city){
  console.log(obj.address.city); // Shenzhen
}

使用 Optional Chaining 可以将这段代码变得更加简洁：

console.log(obj?.address?.city); // Shenzhen

这里的问号表明 address 属性和 city 属性都是可选的。

我们可以通过三元运算符来避免访问 null 或 undefined 的属性。但是，使用 Optional Chaining 的代码要更加简洁，可读性也更高。下面是一个比较：

三元运算符：

const city = obj && obj.address ? obj.address.city : undefined;

Optional Chaining：

const city = obj?.address?.city;

我们也可以通过 try/catch 来避免访问 null 或 undefined 的属性。但是，这种方法会产生额外的开销，并且不能保证代码一定会很重要：

try/catch：

let city;
try {
  city = obj.address.city;
} catch (error) {
  city = undefined;
}

Optional Chaining：

const city = obj?.address?.city;

在 JavaScript 中，我们也可以使用 Optional Chaining 来访问数组元素。假如我们有一个数组：

const arr = [1, 2, 3];

我们想要访问这个数组的第四个元素，可以使用以下的代码：

if(arr && arr.length > 3){
  console.log(arr[3]);
}

使用 Optional Chaining 可以将这段代码变得更加简单：

console.log(arr?.[3]);

使用 Optional Chaining 是为了在我们访问一个深度嵌套的对象时，代码更加简洁。在以下情况下，使用 Optional Chaining 可以提高代码的可读性。

我们有时候会在对象中缺少某些属性。如果我们在访问这些属性时没有使用 Optional Chaining，会导致程序出错。

假如我们没有获取到一个用户的 email 地址，这个 email 属性可能是 undefined。这时候，我们就可以使用 Optional Chaining 来简化代码：

const email = user?.email;

假如我们要对一个很深的对象进行遍历，使用 Optional Chaining 就可以让代码变得更加简洁：

const address1 = user?.address?.home?.city;
const address2 = user?.address?.work?.city;

假如我们不能确定对象中是否有某个属性，或者不知道该属性是否是可访问的，使用 Optional Chaining 就可以避免程序崩溃：

const hasProperty = obj?.[propertyName]?.length;

Optional Chaining 是一个微小但却很实用的特性，在访问深嵌套的对象时能变得非常方便。它可以让代码变得更加简洁，可读性更强。

当我们需要访问一个对象属性时，使用 Optional Chaining 是一个更加稳妥的选择。它可以避免我们的程序崩溃，并且代码也更加简洁易懂。在某些情况下，Optional Chaining 也能够让我们的代码更加高效。

记住，Optional Chaining 可以帮助我们简化代码，但是它并不是万能的。在某些情况下，使用传统的 if 语句或三元运算符可能更加恰当。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6455d0fe968c7c53b0931c1b