简介
随着 Web 技术的发展，前端开发工作越来越复杂。越来越多的数据和功能都集中在网页上，而访问和处理这些数据和功能需要大量的代码和逻辑。在开发过程中，我们经常会遇到数据嵌套层次很深的情况，而这种嵌套层次不仅给开发人员带来了挑战，也增加了代码的复杂性和可读性。
在 ECMAScript 2020 中，新增了可选链（Optional Chaining）操作符，用于简化访问嵌套数据的语法，并提高代码的可读性和可维护性。本文将介绍可选链操作符的用法、优势和示例。
可选链操作符的用法
在介绍可选链操作符的用法之前，我们需要了解一下对象或数组的属性或元素访问方式。
传统的访问方式：
if (obj && obj.foo && obj.foo.bar) {
// do something with obj.foo.bar
}上面的代码判断了 obj、obj.foo 和 obj.foo.bar 是否存在，只有当它们都存在时才会执行后面的逻辑。这种方式的问题在于当 obj、obj.foo 或 obj.foo.bar 中任何一个不存在时，后面的逻辑都不会执行。
而通过可选链操作符，可以更简洁的实现上述逻辑，就是在访问属性或元素时，在属性或元素名后加一个问号（?）。
例如，上面的代码可以用如下方式实现：
if (obj?.foo?.bar) {
// do something with obj.foo.bar
}这样当 obj、obj.foo 或 obj.foo.bar 中任何一个不存在时，后面的逻辑不会执行，同时也不会报错。
可选链操作符的优势
使用可选链操作符，主要有以下优势：
1. 简化访问嵌套数据的语法
在访问嵌套数据时，使用传统的访问方式需要写很多代码来处理空值或未定义值的情况，代码可读性很差，也容易出错。
而使用可选链操作符，可以通过简单的方式访问嵌套数据，代码可读性得到了大幅度提升。例如：
-- -------------------- ---- -------
-- ----
-- ---- -- ------- -- ----------- -- ---------------- -
-- -- --------- ---- ---------------
-
-- ------
-- -------------------- -
-- -- --------- ---- ---------------
-2. 提高代码的可读性和可维护性
使用可选链操作符，可以使代码更加简洁，逻辑更加清晰，易于维护。代码更容易被其他开发人员理解，从而提高团队的协作效率。例如：
// 传统方式 const fullName = user && user.profile && user.profile.name && (user.profile.name.first + ' ' + user.profile.name.last); // 可选链操作符 const fullName = user?.profile?.name?.first + ' ' + user?.profile?.name?.last;
3. 避免出现 TypeError
使用可选链操作符可以避免出现访问未定义值时的 TypeError 错误。例如：
// 传统方式 const age = user && user.profile && user.profile.age; // 可选链操作符 const age = user?.profile?.age;
当 user 或 user.profile 为 undefined 时，访问 age 属性会报 TypeError 错误。而使用可选链操作符，当 user 或 user.profile 为 undefined 时，age 变量赋值为 undefined，不会报错。
可选链操作符的示例
以下是一些使用可选链操作符的示例：
-- -------------------- ---- -------
-- -------------------
----- --- - - ---- - ---- ----- - --
--------------------------- -- -----
--------------------------- -- ---------
-- -------------------
----- --- - --- -- ---
---------------------- -- -
---------------------- -- ---------
-- ------------
----- -- - -
--------- -- -- --------------------
--
----------------- -- -------
-- ------------
--- ---- - -
-------- -
----- -
------ -------
----- -----
--
-------- -
------- ---- ---- -----
----- ----------
------ -----
---- -------
--
------ ----------------------
-
--
-------------------------------------- - - - - --------------------------- -- ----- ----
----------------------------------------- -- -------
------------------------------------------ -- ---------总结
ECMAScript 2020 中新增的可选链操作符，可以帮助开发人员更简单、更可读、更易维护的访问嵌套数据。使用可选链操作符可以在不增加代码复杂性的情况下，提高代码的可读性和可维护性，避免出现 TypeError 错误，以及简化访问嵌套层次。好的编码习惯可以让我们的代码更加容易读懂和管理，值得我们去学习和运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb154ff6b2d6eab31c7598