什么是可选链？
在过去，访问嵌套对象属性是一项很繁琐的任务，需要手动检查每个属性是否存在。在 ECMAScript 2020 中，可选链这一特性的出现简化了这一过程。
简而言之，可选链是一种安全的访问深层嵌套对象属性的方式。与常规属性访问（.）或数组访问（[ ]）不同，可选链操作符（?.）将根据先前的属性是否存在来判断是否继续访问。
可选链的应用场景
可选链能够使得访问深层嵌套对象属性更加安全高效，特别是当遇到对象属性缺失或空引用时。下面是一些使用可选链的例子：
调用深层嵌套对象属性的方法
-- -------------------- ---- -------
----- ---- - -
-------- -
------- -
----- ----- --------
------- ----
--
--
--
-- ------
----- ---------- - ------------ -- ------------------- -- -------------------------
-- -----
----- ---------- - ----------------------------访问数组中的元素
-- -------------------- ---- -------
----- ---- - -
--------- -
- ----- ------ ---- -- --
- ----- ------ ---- -- --
--
--
-- ------
----- ---------------- - ------------- -- ---------------- -- ---------------------
-- -----
----- ---------------- - -------------------------在 React 组件中处理 props
在 React 组件中，通过可选链来处理 props，可以简洁、安全地访问深层嵌套的对象属性。
const MyComponent = ({ data }) => (
<div>
<h1>{data?.title}</h1>
<p>{data?.content?.text}</p>
</div>
);可选链的使用注意事项
当前浏览器支持
虽然可选链已经成为 ECMAScript 2020 中的一部分，但是仍然需要考虑当前浏览器的支持情况。
在现代浏览器中，可选链已被广泛支持，但是在旧版浏览器中可能会出现兼容性问题，考虑到这一点，最好在使用之前进行判断。
if (data?.address?.street?.name) {
// 执行某些操作
}对象类型检查
在使用可选链时，需要确保访问对象中的属性类型与预期相符，例如，如果属性应该是字符串类型，并且却是一个数字类型，可能会导致出现一些奇怪的问题，同时会影响代码的可读性和可维护性。
结论
在 ECMAScript 2020 中，可选链是一项非常有用的特性，它可以让我们更加高效、简洁地安全地访问深层嵌套的对象属性。但是，在应用可选链时，需要注意浏览器支持情况和对象类型检查这些细节，以确保代码的完整性和正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6706487ed91dce0dc85b192b