在 JavaScript 开发中，我们经常需要访问对象的属性或方法。但是，当我们处理嵌套对象时，如果其中一个对象为空或 undefined，那么访问其属性或方法就会报错，这时候我们就需要使用可选链操作符来避免这种情况。
什么是可选链操作符
可选链操作符是 ES2020 新增的语法，用于简化访问嵌套对象属性或方法的代码。它的作用是判断当前对象是否为空或 undefined，如果是，则返回 undefined，否则继续访问其属性或方法。
可选链操作符使用问号（?）表示，放置在需要访问的属性或方法名后面，例如：
-- -------------------- ---- -------
----- --- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
-
-- ----------------
----- ---- - ------------------ -- ----------
-- -- ------- --- ------------- ---------
----- -------- - ---------------------- -- ---------可选链操作符的优势
在日常开发中，我们经常需要处理嵌套对象，使用可选链操作符可以帮助我们避免错误和冗长的代码。以下是可选链操作符的优势：
简化代码：使用可选链操作符可以避免使用 if 语句或三元表达式来判断对象是否为空或 undefined。
避免错误：使用可选链操作符可以避免访问空对象或 undefined 对象而导致的错误。
提高可读性：使用可选链操作符可以使代码更加简洁和易读，减少不必要的嵌套和冗余代码。
可选链操作符的使用场景
可选链操作符适用于访问嵌套对象属性或方法的场景，以下是一些使用可选链操作符的示例：
示例 1：访问嵌套对象属性
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
-
-- ----------------
----- ---- - ------------------- -- ----------
----- -------- - ----------------------- -- ---------示例 2：调用嵌套对象方法
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- ------
---------------- -
------ -------------- ---------------
-
-
-
-- ----------------
----- ----------- - --------------------------------- -- ---------- ------- -----
----- ------- - ----------------------------- -- ---------示例 3：访问数组元素
const arr = [1, 2, 3] // 使用可选链操作符访问数组元素 const first = arr?.[0] // 1 const fourth = arr?.[3] // undefined
可选链操作符的兼容性
可选链操作符是 ES2020 新增的语法，目前还未被所有浏览器和 Node.js 版本支持。以下是可选链操作符的兼容性情况：
- Chrome 80+ ✔
- Firefox 74+ ✔
- Safari 13.1+ ✔
- Edge 80+ ✔
- Node.js 14.0.0+ ✔
- Internet Explorer ❌
在使用可选链操作符时，需要注意兼容性问题，可以使用 Babel 等工具将代码转换为 ES5 或更早的版本，以兼容不支持可选链操作符的浏览器和 Node.js 版本。
总结
可选链操作符是 ES6 中的一项重要语法，它能够简化访问嵌套对象属性或方法的代码，避免因空对象或 undefined 对象而导致的错误，提高代码的可读性和可维护性。在开发中，我们可以灵活使用可选链操作符，使代码更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658112f8d2f5e1655dc47f44