在使用 JavaScript 开发前端应用的过程中，经常会遇到对象不存在属性的情况。如果没有一个好的处理方法，就会出现代码逻辑错误和运行时异常。ES11 引入了可选链操作符，使得开发者可以更加优雅地解决这个问题。
可选链操作符的基本语法
可选链操作符是一个问号 ?，用来检查当前对象是否存在指定的属性或方法，然后执行相应的操作。
const value = object?.property
上述代码中，object 是要检查的对象，property 是要访问的属性或方法。如果 object 存在且 property 存在，则返回 property 的值；否则返回 undefined。如果 object 为 null 或 undefined，则不会执行检查，直接返回 undefined。
在可选链操作符中还可以使用一些更高级的语法，例如
const value = object?.[expression]
上述代码中，expression 是计算属性的表达式，可以方便地获取动态属性。同时，还可以使用可选链操作符来调用方法：
object?.method()
可选链操作符的应用场景
可选链操作符可以优雅地解决对象不存在属性的问题，特别是在访问多层嵌套对象时更为实用。下面举一个简单的例子：
const name = person && person.address && person.address.city;
上述代码是访问一个嵌套对象 person 的 address.city 属性，如果其中任何一个属性不存在，则会返回 undefined。使用可选链操作符可以更简单地实现同样的功能：
const name = person?.address?.city;
另外，可选链操作符还可以很好地处理数组的操作场景，例如：
const value = array?.[index];
上述代码中，array 是数组，index 是要访问的索引。如果 array 存在且 index 存在，则返回对应的值；否则返回 undefined。
总结
ES11 中的可选链操作符是一种优雅地解决对象不存在属性的问题的方式。它能够帮助开发者更加简洁地编写代码，减少出现逻辑异常的可能性。以上是对可选链操作符的基本介绍和应用场景，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f9f5eadd4f0e0ff82c039