在前端开发中，我们经常要处理深层嵌套的数据结构，在访问嵌套的属性或方法时，如果存在未定义或 null 的情况，就会出现错误和异常。这时，我们需要在代码中增加大量的判断语句，增加了代码的复杂度和可读性。为了解决这个问题，ECMAScript 2016 中引入了可选链接操作符（Optional Chaining Operator），可以让我们更方便地访问嵌套对象的属性和方法。
可选链接操作符的语法
可选链接操作符是一种新的语法结构，用来访问嵌套对象的属性和方法，其语法格式如下：
obj?.prop // 访问对象属性 obj?.[expr] // 访问对象属性值 func?.(args) // 调用对象方法
其中，obj 是一个对象，prop 是该对象的属性名，expr 是一个表达式，func 是一个函数，args 是函数参数。可选链接操作符 ?. 表示如果 obj 为 null 或 undefined，则返回 undefined，否则继续访问 prop 或 [expr] 属性，或者调用 func 函数。
可选链接操作符的应用举例
下面，我们用具体的代码来演示可选链接操作符的应用场景。
访问对象属性
假设有一个 user 对象，它包含了一个 info 子对象，这个 info 子对象包含了一个 name 的属性值。我们想要访问 user.info.name 属性值，但是 user 和 user.info 都有可能是 null 或 undefined，这时就可以使用可选链接操作符 ?.。
const user = {}
console.log(user?.info?.name) // undefined
user.info = null
console.log(user?.info?.name) // undefined
user.info = { name: 'Sun' }
console.log(user?.info?.name) // 'Sun'在上面的代码中，我们使用可选链接操作符 ?. 来访问 user.info.name 属性值。当 user 或 user.info 为 null 或 undefined 时，返回 undefined，否则返回 user.info.name 属性值。
访问对象属性值
除了访问属性，可选链接操作符 ?. 还可以访问对象属性值。假设有一个 colors 对象，它包含了三个属性值：red、green、blue。我们想要访问 colors['green'] 属性值，但是 colors 有可能是 null 或 undefined，这时就可以使用可选链接操作符 ?.。
const colors = null
console.log(colors?.['green']) // undefined
colors = { red: '#ff0000', green: '#00ff00', blue: '#0000ff' }
console.log(colors?.['green']) // '#00ff00'在上面的代码中，我们使用可选链接操作符 ?. 来访问 colors['green'] 属性值。当 colors 为 null 或 undefined 时，返回 undefined，否则返回 colors['green'] 属性值。
调用对象方法
在对象方法调用时，如果对象为 null 或 undefined，就会出现 TypeError 异常。为了避免这个异常，可选链接操作符 ?. 可以判断对象是否为 null 或 undefined，如果是，则直接返回 undefined。假设有一个 drawer 对象，它包含了一个 open 和一个 close 方法，我们想要调用 drawer.close() 方法，但是 drawer 有可能是 null 或 undefined，这时就可以使用可选链接操作符 ?.。
const drawer = null
drawer?.close?.() // undefined
drawer = {
open: function() { console.log('Drawer is open.') },
close: function() { console.log('Drawer is closed.') }
}
drawer?.close?.() // 'Drawer is closed.'在上面的代码中，我们使用可选链接操作符 ?. 来调用 drawer.close() 方法。当 drawer 或 drawer.close 为 null 或 undefined 时，返回 undefined，否则调用 drawer.close() 方法。
总结
可选链接操作符 ?. 是 ECMAScript 2016 的一项新语法，它可以在访问或调用嵌套对象的属性或方法时，避免出现 null 或 undefined 的异常，减少代码的复杂度和可读性。在使用可选链接操作符时，需要注意应用场景，避免不必要的使用，增加代码的可维护性。
希望这篇文章对大家学习 ECMAScript 2016 中的可选链接操作符有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b10ed348841e9894d5efaf