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