ES2020：为什么需要 Optional Chaining Operator

在 JavaScript 的开发过程中，经常会出现需要访问嵌套对象的情况。在访问嵌套对象时，我们可能会遇到一些问题，比如对象不存在或者属性不存在等等。为了解决这些问题，ES2020 引入了可选链操作符（Optional Chaining Operator）。

什么是可选链操作符

可选链操作符是一个新的语法，可以帮助我们访问嵌套对象的属性，即使这些对象不存在。它使用问号（?）作为操作符，可以在属性访问链中添加一个问号来表示如果对象不存在，那么就不会访问它的属性。

下面是一个使用可选链操作符的示例：

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

console.log(obj?.a?.b?.c); // 1
console.log(obj?.x?.y?.z); // undefined

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

为什么需要可选链操作符

在 JavaScript 中，访问嵌套对象的属性是一件很常见的事情。但是，如果对象不存在或者属性不存在，那么就会出现一些问题。使用可选链操作符可以避免这些问题，让我们的代码更加健壮。

下面是一个使用可选链操作符的示例：

const user = {
  name: '张三',
  address: {
    city: '北京'
  }
};

const city = user.address?.city;

console.log(city); // '北京'

在上面的示例中，我们使用了可选链操作符来访问嵌套对象的属性。如果 address 属性不存在，那么 city 变量就会赋值为 undefined。这样就避免了代码出现错误。

可选链操作符的指导意义

使用可选链操作符可以让我们的代码更加健壮。当我们访问嵌套对象的属性时，如果对象不存在或者属性不存在，那么就不会出现错误。这样可以提高代码的可读性和可维护性。

下面是一个使用可选链操作符的示例：

const user = {
  name: '张三',
  address: {
    city: '北京'
  }
};

const city = user.address?.city;

if (city) {
  console.log(`用户所在城市是：${city}`);
} else {
  console.log('用户未填写地址');
}

在上面的示例中，我们使用了可选链操作符来访问嵌套对象的属性。如果 address 属性不存在，那么 city 变量就会赋值为 undefined。在 if 语句中，我们判断了 city 是否存在，从而输出不同的结果。这样可以提高代码的可读性和可维护性。

总结

可选链操作符是 ES2020 引入的一个新语法，可以帮助我们访问嵌套对象的属性，即使这些对象不存在。使用可选链操作符可以让我们的代码更加健壮，提高代码的可读性和可维护性。在开发过程中，我们应该尽可能地使用可选链操作符来访问嵌套对象的属性。

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