ECMAScript 2021 中如何使用 Optional Chaining 操作符安全地访问多层对象属性-JavaScript中文网-JavaScript教程资源分享门户

在一个 JavaScript 应用中，我们经常需要深入嵌套的对象来获取数据。当对象链中间的某个对象未定义或为 null 时，我们遇到了一个非常令人头痛的困扰：我们的代码将导致运行时错误。

ECMAScript 2021 引入了一个新的 Optional Chaining 操作符 ?.，可以更安全地访问多层对象属性，避免了出现运行时错误。在本文中，我们将深入了解 Optional Chaining 的用法。

Optional Chaining 是什么？

Optional Chaining 允许我们访问嵌套的属性和方法，而不需要在连续的访问过程中判断每个结果是否为 null 或 undefined。这意味着我们可以使用更简单的代码来避免运行时错误。

下面是一个没有 Optional Chaining 的示例代码：

// javascriptcn.com 代码示例
let person = {
  name: 'Alice',
  address: {
    city: 'Shanghai',
    street: 'Nanjing Road',
  },
};

let streetName;

if (person && person.address && person.address.street) {
  streetName = person.address.street;
}

在这里，我们必须检查 person ， person.address 和 person.address.street 是否为 null 或 undefined。如果任何一个属性为 null 或 undefined，我们将遇到一个运行时错误。

我们可以使用 Optional Chaining 操作符来解决该问题，通过在属性后面添加一个 ?.，我们可以让 JavaScript 检查属性是否存在并且不是 null 或 undefined ：

let streetName = person?.address?.street;

在这个新代码中，如果 person，person.address 或 person.address.street 任何一个是 null 或 undefined，那么 streetName 的值将是 undefined，而不会产生运行时错误。这大大简化了我们的代码。

Optional Chaining 的用法

Optional Chaining 具有几个基本用法，我们将在以下段落中进行介绍。

安全访问属性

我们已经看到了如何使用 Optional Chaining 访问一个对象中的嵌套属性。下面的示例中，我们使用 Optional Chaining 操作符访问嵌套对象 book 的 name 和 author 属性：

// javascriptcn.com 代码示例
let book = {
  name: 'JavaScript Web Applications',
  author: {
    name: 'Alex MacCaw',
  },
};

let authorName = book?.author?.name;
let bookName = book?.name;

在这里，我们可以看到 book?.author?.name 的代码，如果 book 或 book.author 中的任何一个是 null 或 undefined，那么 book.author.name 将不会被访问，代码不会产生运行时错误。book?.name 的代码类似。

判断数组元素是否存在

在访问 JavaScript 数组中的元素时，我们经常需要检查索引是否存在。Optional Chaining 操作符使我们可以轻松实现这个检查。下面的示例展示了如何使用 Optional Chaining 访问数组元素：

let arr = [1, 2, 3];

let secondValue = arr?.[1];
let forthValue = arr?.[3];

在这里，我们可以看到 arr?.[1] 的代码，如果 arr 不是数组或者数组的第二个元素为空，那么 secondValue 将会是 undefined。而当访问 arr?.[3] 时，由于数组只有三个元素，它将仍然被视为 undefined：

使用 Optional Chaining 函数调用

如果我们不确定是否可以访问对象的方法时，Optional Chaining 也提供了一种安全的方式来访问方法。下面的示例展示了如何使用 Optional Chaining 访问方法：

// javascriptcn.com 代码示例
let obj = {
  x: 1,
  y: 2,
  computeZ: function () {
    return this.x + this.y;
  },
};

let obj2 = {};

let z = obj?.computeZ?.();
let z2 = obj2?.computeZ?.();

在这里，我们可以看到 obj?.computeZ?.() 的代码，如果 obj 或 obj.computeZ 中的任何一个是 null 或 undefined，那么 z 将不会被计算。而当我们使用 obj2 访问 obj2?.computeZ?.() 是，它将会返回 undefined

Optional Chaining 嵌套用法示例

Optional Chaining 操作符非常适合访问嵌套的数据结构，我们可以在以下示例中看到：

// javascriptcn.com 代码示例
let person = {
  name: 'Bob',
  city: 'Shanghai',
  job: {
    title: 'Software Engineer',
    company: {
      name: 'ABC Corp.',
      location: {
        city: 'Beijing',
      },
    },
  },
};

let jobCity = person?.job?.company?.location?.city;

在这里，需要访问 person，person.job， person.job.company，以及 person.job.company.location.city。如果 person 或者任何中间属性没有设置，代码不会产生运行时错误，jobCity 的值将是 undefined。

总结

Optional Chaining 操作符为我们提供了一种简单而安全的方式来访问嵌套的对象和方法，在 JavaScript 应用中避免了运行时错误。我们可以在深嵌套的属性和对象之间使用 Optional Chaining 操作符，从而使代码更加简洁和可读。

在使用 Optional Chaining 时，需要注意：在某些情况下，我们可能需要判断属性是否不存在、是否为 null 或者 undefined，并使用备用选项。如果你需要在访问属性时执行复杂的操作，那么 Optional Chaining 操作符可能不是最好的选择。

ECMAScript 2021 中绝大多数现代浏览器已经支持 Optional Chaining 操作符，但一些较老的浏览器可能不支持。在编写代码时需要注意浏览器兼容性。

本文只是一个介绍，Optional Chaining 操作符还有很多其他用法。如果你想了解更多，请访问 MDN 文档。

示例代码

完整的 Optional Chaining 示例代码可在以下代码块中找到：

// javascriptcn.com 代码示例
let book = {
  name: 'JavaScript Web Applications',
  author: {
    name: 'Alex MacCaw',
  },
};

let authorName = book?.author?.name;
let bookName = book?.name;
console.log(authorName); // "Alex MacCaw"
console.log(bookName); // "JavaScript Web Applications"

let arr = [1, 2, 3];
let secondValue = arr?.[1];
let forthValue = arr?.[3];
console.log(secondValue); // 2
console.log(forthValue); // undefined

let obj = {
  x: 1,
  y: 2,
  computeZ: function () {
    return this.x + this.y;
  },
};

let obj2 = {};
let z = obj?.computeZ?.();
let z2 = obj2?.computeZ?.();
console.log(z); // 3
console.log(z2); // undefined

let person = {
  name: 'Bob',
  city: 'Shanghai',
  job: {
    title: 'Software Engineer',
    company: {
      name: 'ABC Corp.',
      location: {
        city: 'Beijing',
      },
    },
  },
};

let jobCity = person?.job?.company?.location?.city;
console.log(jobCity); // "Beijing"

let car = {
  model: 'Sedan',
};

let carPrice = car?.price || 10000;
console.log(carPrice); // 10000

以上每个示例都演示了如何使用 Optional Chaining 操作符。在示例代码中，我们还使用一个类似 let carPrice = car?.price || 10000; 的代码，该代码告诉 JavaScript：如果 car.price 不存在或者为 null 或 undefined，就使用 10000 作为 carPrice 的默认值。

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