ECMAScript 2020 (ECMAScript 11)：可选链运算符（Optional Chaining）的日常使用

ECMAScript 2020（ECMAScript 11）是 JavaScript 语言的最新版本，它带来了许多新的功能和特性，其中最引人注目的是可选链运算符（Optional Chaining）。

可选链运算符是一个非常实用的新特性，它可以帮助开发者简化代码并避免出现错误。在本文中，我们将探讨可选链运算符的日常使用，包括如何使用它以及它的优缺点。

什么是可选链运算符？

在 JavaScript 中，有时我们需要访问一个对象的属性或方法，但是这个对象可能不存在或者为空。在这种情况下，我们需要使用条件语句或者短路运算符来避免出现错误。

可选链运算符是一个新的语法，它可以帮助我们避免这些问题。它的语法如下：

obj?.prop
obj?.[expr]
func?.(args)

其中，obj 可以是任何对象，prop 是对象的属性名，expr 是一个表达式，func 是一个函数名，args 是函数的参数。

如果 obj 存在，那么这个表达式会返回 obj.prop、obj[expr] 或者 func(args)。如果 obj 不存在，那么这个表达式会返回 undefined，而不是抛出一个错误。

如何使用可选链运算符？

可选链运算符可以很好地解决一些常见的问题，比如访问对象的嵌套属性或者调用对象的嵌套方法。下面是一些示例：

访问对象的嵌套属性

假设我们有一个对象 person，它包含了一个嵌套的属性 address，我们想要访问这个属性的 street 字段。如果 person 不存在或者 address 不存在，那么我们需要使用条件语句或者短路运算符来避免出现错误：

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

使用可选链运算符，我们可以简化这个代码：

console.log(person?.address?.street);

调用对象的嵌套方法

假设我们有一个对象 person，它包含了一个嵌套的方法 getFullName()，我们想要调用这个方法并打印结果。如果 person 不存在或者 getFullName() 不存在，那么我们需要使用条件语句或者短路运算符来避免出现错误：

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

使用可选链运算符，我们可以简化这个代码：

console.log(person?.getFullName?.());

可选链运算符的优缺点

可选链运算符是一个非常实用的新特性，它可以帮助我们简化代码并避免出现错误。但是它也有一些缺点，需要注意一下。

优点

• 简化代码：可选链运算符可以帮助我们避免使用多个条件语句或者短路运算符来访问对象的属性或者方法。
• 避免错误：可选链运算符可以帮助我们避免出现错误，比如访问不存在的对象或者调用不存在的方法。

缺点

• 兼容性问题：可选链运算符是 ECMAScript 2020 中的新特性，可能不被所有的浏览器所支持。
• 可读性问题：可选链运算符可能会降低代码的可读性，特别是在嵌套的对象中使用时。

总结

可选链运算符是一个非常实用的新特性，它可以帮助我们简化代码并避免出现错误。在日常的开发中，我们可以使用它来访问对象的属性或者调用对象的方法，从而提高代码的可维护性和可读性。

但是在使用可选链运算符时，我们需要注意它的兼容性问题和可读性问题，以便让我们的代码更加稳定和易于维护。

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