探索译JS新特性“可选链式调用”

2023-09-10 00:21:24

在JavaScript中，我们经常需要访问嵌套对象的属性。传统的做法是使用链式调用，即使用一个点来访问对象的属性，然后使用另一个点来访问其子对象的属性，以此类推。然而，当某个属性不存在时，链式调用就会抛出一个错误。

可选链式调用（又称问号运算符）是一种新的JavaScript语法特性，它可以解决这个问题。可选链式调用使用一个问号来代替点，它只会在属性存在时才访问该属性。如果属性不存在，则返回undefined。

可选链式调用有很多优点。首先，它可以使代码更简洁。例如，下面的代码使用传统链式调用访问对象的属性：

const obj = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

const street = obj.address.street;

如果address对象不存在，或者street属性不存在，则上面的代码就会抛出一个错误。

使用可选链式调用，我们可以重写上面的代码，如下所示：

const obj = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

const street = obj?.address?.street;

如果address对象不存在，或者street属性不存在，则上面的代码不会抛出一个错误，而是返回undefined。

可选链式调用的另一个优点是它可以提高代码的可读性。通过使用问号，我们可以明确地表示我们正在访问一个可能不存在的属性。这可以使代码更易于理解和维护。

可选链式调用还有一些局限性。首先，它只支持对象属性的访问，不支持数组索引的访问。其次，它不能用于访问getter和setter方法。第三，它不能用于访问Symbol属性。

总的来说，可选链式调用是一个非常有用的新特性，它可以使JavaScript代码更简洁、更易读、更健壮。

以下是一些可选链式调用的实际场景使用示例：