在前端开发中，我们经常会遇到处理 undefined 和 null 的情况。而在 ES9 中，提出了一种非常方便的语法——可选链（Optional Chaining），它可以帮助我们避免在处理 undefined 和 null 时出现的错误，让代码更加简洁易懂。
可选链的语法
可选链的语法非常简单，就是在访问对象属性或方法时，在需要访问的属性或方法名后面添加一个问号 ?，表示如果该属性或方法不存在，直接返回 undefined，而不会报错。
下面是一个示例代码，展示了使用可选链的语法：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - --------------------
------------------ -- -----------
----- ------- - -----------------------
--------------------- -- ------------在上面的代码中，我们使用了可选链的语法来访问 user 对象中的 address 属性和 city 属性。由于 user 对象中的 address 属性存在，所以我们可以正确地获取到 city 属性的值。而由于 user 对象中的 address 属性不存在，所以我们无法获取到 country 属性的值，直接返回了 undefined。
可选链的使用场景
可选链的语法非常适用于处理对象属性或方法的嵌套情况，特别是在嵌套层数比较多的情况下，使用可选链可以让代码更加简洁易懂。
下面是一个示例代码，展示了使用可选链来处理对象属性的嵌套情况：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
--
----- ------ - ----------------------
-------------------- -- ---------- ----
----- -------- - ------------------------------
---------------------- -- ------------在上面的代码中，我们使用了可选链的语法来访问 user 对象中的 address 属性和 street 属性。由于 user 对象中的 address 属性存在，所以我们可以正确地获取到 street 属性的值。而由于 user 对象中的 address 属性中不存在 district 属性，所以我们无法获取到 district.name 的值，直接返回了 undefined。
可选链的注意事项
虽然可选链的语法非常方便，但是在使用时也需要注意一些细节。
首先，可选链只能用于访问对象属性或方法，不能用于访问数组元素。如果需要访问数组元素，可以使用数组的 ?.[] 语法。
其次，可选链的语法只能用于访问对象属性或方法，不能用于赋值或删除对象属性。如果需要对对象属性进行赋值或删除操作，需要先判断该属性是否存在。
最后，可选链的语法在一些旧版浏览器中可能不被支持，需要使用 polyfill 或者编译工具进行转换。
总结
可选链是 ES9 中非常实用的一种语法，它可以帮助我们避免在处理 undefined 和 null 时出现的错误，让代码更加简洁易懂。在处理对象属性或方法的嵌套情况时，使用可选链可以让代码更加简洁易懂。但是在使用时需要注意一些细节，避免出现其他问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650819a795b1f8cacd342ac8