ECMAScript 2018 中的可选链式写法
在前端开发中，我们经常会遇到需要操作深嵌套的对象或数组的情况，当然我们可以通过多次判断属性是否存在来避免报错，但这样的写法往往会显得冗长而且容易出错。而 ECMAScript 2018 中的可选链式写法则能够提供一种更为简洁的方式来处理这类问题。
什么是可选链式写法？
在 ES11 中，可选链式写法是指通过使用 ? 符号来判断对象或数组属性是否存在，如果存在则返回对应的值，否则返回 undefined。比如对于如下对象：
----- ---- - -
----- -------
-------- -
---- ---
------- --------
-
--
我们想要获取 user 对象中 profile 对象的 age 属性值时就可以使用可选链式写法：
----- --- - ------------------- -- -- --- ------- - -------------------- -- ---------
上述代码中，由于 user 对象中没有 address 属性，所以 address 变量的值为 undefined。
可选链式写法的使用场景
可选链式写法的出现是为了解决属性不存在的情况。在以下情况下，该写法特别适用：
对于从服务器获取的 JSON 数据，属性是否存在是不确定的，使用可选链式写法能够有效避免因属性不存在导致的报错。
在 React 组件编写中，当我们需要获取数据以进行渲染时，使用可选链式写法能够避免因数据尚未加载而导致的报错。
可选链式写法的语法
可选链式写法的语法主要包含以下几个部分：
?. 运算符：用于判断对象或数组属性是否存在。
?? 运算符：用于处理空值，如果前面的值是 undefined 或 null，则返回该运算符后面的值。
下面是一个包含?. 和 ?? 运算符的示例代码：
-- ----
----- ---- - -
----- ------
-------- -
---- ---
---- -----
-
--
-- ----
----- --- - ------------------ -- ---------- -- ---------
----- ---- - ------------------- -- ----------- -- ----------如果使用的是 ?. 运算符，则表示该属性不存在时返回 undefined；如果使用的是 ?? 运算符，则表示该属性不存在时返回运算符后面的值。
需要注意的是，由于该写法是 ES11 中新增的特性，所以尽量不要在生产环境中过早使用，以免出现兼容性问题。
总结
本文介绍了 ECMAScript 2018 中的可选链式写法，它能够有效解决操作深嵌套对象或数组时出现的问题，实现代码的简洁和安全。需要注意的是该写法为 ES11 中新增功能，所以在开发过程中需要注意浏览器的兼容性问题，并进行充分测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6655d59dd3423812e4a81213