如何使用 ECMAScript 2016 的可选链式操作符解决对象属性不存在的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要访问对象的属性和方法。但有时候在访问对象的属性或方法时，可能会遇到对象属性不存在的情况。在以前，我们通常需要使用 if 判断来避免这种情况的发生，但是这种做法会让代码变得臃肿。现在，我们可以使用 ECMAScript 2016 的可选链式操作符来解决这个问题。

什么是可选链式操作符

可选链式操作符（Optional Chaining Operator）是 ECMAScript 2016 新增的一个语法。它允许我们使用一种简短的方式来访问对象的属性，而不需要额外的判断语句。

可选链式操作符的语法是 ?.，它可以在对象属性可能不存在的情况下访问属性。这意味着你可以直接访问属性，而不必担心出现错误。

下面是一个示例代码，演示了如何使用可选链式操作符来解决对象属性不存在的问题。我们假设有一个对象 person，其中包含了一个属性 name，但是没有属性 address：

const person = {
  name: 'Tom',
};

如果我们不使用可选链式操作符来访问 address 属性，代码可能会引发错误：

const street = person.address.street;

为了避免这种情况，我们可以使用可选链式操作符（?.）来访问 address 属性：

const street = person.address?.street;

这样，如果 address 属性不存在，代码不会出错，而是会返回 undefined。如果 address 属性存在，代码会正常执行，返回 street 属性的值。

上述示例中，我们只是访问了一个对象的一层属性。但是在实际情况中，我们可能需要访问多层嵌套的属性。在这种情况下，我们可以使用多个可选链式操作符来访问嵌套属性。

例如，假设我们有一个对象 company，其中包含了一个属性 address，该属性是一个对象，其中包含了一个属性 street：

const company = {
  address: {
    street: '123 Main St',
  },
};

如果我们想访问 company 对象的 address 属性的 street 属性，我们可以使用如下代码：

const street = company?.address?.street;

如果 address 属性不存在，代码会返回 undefined。如果 address 属性存在，但是 street 属性不存在，代码同样会返回 undefined。只有当 street 属性存在时，代码才会返回该属性的值。

使用 ECMAScript 2016 的可选链式操作符，可以让我们在访问对象属性时，避免出现错误并且减少代码量。在日常开发中，使用可选链式操作符能够提升代码的可读性和可维护性。现在，我们已经了解了可选链式操作符的语法和使用方法。在实际开发中，我们可以尝试使用它来简化我们的代码，提升开发效率。

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