可选链 - JavaScript

可选链是ES2020中新增的功能, 它提供了一种更安全, 优雅处理深层嵌套对象的方式。本文将为您介绍可选链及其用法。

什么是可选链？

可选链是一种链式调用操作符，使用问号（?）来避免访问未定义或 null 的嵌套属性时出错。因此，它就是一种及早退出的机制，能够很好地解决常见的问题。

例如:

const person = {
  name: 'Tom',
  age: 20,
  address: {
    city: 'Beijing',
    postCode: '100010'
  }
};

console.log(person.address.postCode); // 100010
console.log(person.contact.phone); // TypeError: Cannot read property 'phone' of undefined

在上面的例子中，我们可以看到 person.address.postCode 没有问题，但是当我们访问 contact 而 person 上并没有 contact 属性时，会抛出 TypeError 错误。

现在，我们可以使用可选链来避免这种情况。下面是可选链的使用方式:

console.log(person.address?.postCode); // 100010
console.log(person.contact?.phone) // undefined

使用可选链之后，如果对象上不存在对应的属性，而且如果存在多层嵌套属性，则返回 undefined 而不是 TypeError 错误。

如何使用可选链？

对象属性

可选链的正常使用方法就像 . 属性访问操作符一样。下面是一个使用可选链获取对象属性的例子:

const person = {
  name: 'Tom',
  age: 20,
  address: {
    city: 'Beijing',
    postCode: '100010'
  }
};

console.log(person.address?.postCode); // 100010
console.log(person.contact?.phone) // undefined

在上面的例子中，我们使用了可选链来访问 person 对象中的嵌套属性。如果 address 属性不存在，那么会返回 undefined。

数组

可选链不仅能够用于对象属性，还可以用于数组元素。下面是使用可选链访问数组元素的示例:

const arr = [
  { name: 'Tom', age: 20 },
  { name: 'Jerry', age: 25 }
];

console.log(arr?.[0]?.name) // Tom
console.log(arr?.[3]) // undefined

在上面的例子中，我们使用了可选链来访问 arr 数组中的元素。如果我们想要获得一个不存在的数组元素，那么就会返回 undefined。

函数

我们还可以使用可选链调用函数，并将其运用在以下函数调用中:

const obj = {
  foo: function () {
    return 'Hello World!';
  }
};

console.log(obj.foo?.()); // 'Hello World!'
console.log(obj.bar?.()); // undefined

在上面的例子中，我们使用了可选链来调用 obj 对象中的函数。如果该函数不存在，会返回 undefined。

结论

可选链是一个非常有用的功能，可以让代码更加安全, 优雅地处理嵌套对象。在进行对象属性、数组元素和函数调用时，我们可以使用可选链来避免未定义或 null 的属性而造成程序异常。