初学者指南：ES12 中的可选链操作符使用教程

在 JavaScript 开发中，我们经常需要处理对象的属性或数组元素，而属性或元素可能不存在或者为 undefined，这时候访问他们就会引发错误。为了避免这种情况，ES12 提供了可选链（Optional Chaining）操作符，让我们能够简化代码，更加方便地完成这项工作。本文将介绍 ES12 可选链操作符的使用教程，包括详细的语法和示例代码。

语法

可选链操作符是一个问号后面跟一个点（.）或者方括号（[]）的形式，如下：

object?.property
object?.[property]

如果 object 存在，并且 property 存在，那么表达式返回 object.property 或 object[property] 的值。但如果 object 或 property 不存在，则表达式返回 undefined 而不是抛出一个错误。

示例

访问对象属性

假设我们定义了一个对象 person 和一个方法 getAddress()，person 对象中包含 address 属性，address 属性中包含 city 和 street 属性。如果我们想要访问它们，通常的写法是这样的：

if (person && person.address && person.address.city) {
  console.log(person.address.city);
}

if (person && person.getAddress && person.getAddress()) {
  console.log(person.getAddress());
}

这样的代码既冗长又难以维护。使用可选链操作符后，我们可以这样访问属性：

console.log(person?.address?.city);
console.log(person?.getAddress?.());

如果 person 或 address 或 getAddress() 不存在，这些表达式将会返回 undefined。

访问数组元素

看下面的示例，数组 arr 包含了名字、年龄和城市属性：

const arr = [
  { name: 'Alice', age: 21, city: 'Beijing' },
  { name: 'Bob', age: 22 },
  { name: 'Citi', city: 'Shanghai' },
];

我们想要访问数组元素的某个属性，需要在访问前检查数组元素是否存在以及是否包含该属性：

if (arr && arr[0] && arr[0].age) {
  console.log(arr[0].age);
}

使用可选链操作符，我们可以简化代码：

console.log(arr?.[0]?.age);
console.log(arr?.[1]?.age);
console.log(arr?.[2]?.age);

总结

使用 ES12 可选链操作符可以简化代码、提高开发效率，避免意外的错误，特别是在处理深度嵌套的对象或数组时尤为重要。本文介绍了可选链操作符的语法和示例，希望能让初学者掌握并运用好这项功能。

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