在前端开发中，我们经常会遇到需要访问深层嵌套对象的情况，例如：
-- -------------------- ---- -------
----- ---- - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- ------
------ -----
---- -------
-
-
----- ------- - ---------------- -- -------但是，如果对象中存在某个属性为空或未定义，如：
const user = {
name: 'John',
age: 30,
address: null
}
const zipCode = user.address.zip // TypeError: Cannot read property 'zip' of null就会导致代码出现错误，需要手动加入判断语句，如：
const zipCode = user.address ? user.address.zip : undefined
这样的写法虽然能够避免错误，但是代码变得复杂难读，特别是在访问多层嵌套对象时更是如此。
ES11 的 Optional Chaining 语法就是为了解决这个问题而生的。
Optional Chaining 语法
Optional Chaining 语法使用 ?. 操作符来访问嵌套对象属性，如果对象或属性不存在，就会返回 undefined，而不是抛出错误。例如：
const zipCode = user.address?.zip // undefined
如果 user.address 不存在，就直接返回 undefined，不需要手动加入判断语句。
Optional Chaining 语法也支持访问数组元素，例如：
const arr = [1, 2, 3] const value = arr?.[0] // 1
如果数组不存在或者对应下标的元素不存在，就会返回 undefined。
Optional Chaining 语法还支持函数调用，例如：
-- -------------------- ---- -------
----- ---- - -
----- -------
---- ---
------------ -
------ ------------
-
-
----- ------- - ----------------------- -- ---------如果 getAddress 方法不存在，就会直接返回 undefined，不会抛出错误。
使用示例
下面是一个使用 Optional Chaining 语法的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- ------
------ -----
---- -------
-
-
----- ------- - ----------------- -- -------
-------------------- -- -------在这个示例中，我们使用 Optional Chaining 语法来访问 user.address.zip，如果 user.address 不存在，就会返回 undefined。
总结
Optional Chaining 语法是 ES11 引入的一个非常实用的特性，能够帮助我们避免代码复杂度，提高代码的可读性和可维护性。在访问深层嵌套对象时，我们可以优先考虑使用 Optional Chaining 语法来简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663ec4bad3423812e4d011f2