背景
在前端开发中，常常需要处理嵌套对象的数据，比如从后端接口取回的数据，可能会有多层嵌套的对象，而我们需要查询其中的某个属性。在 JavaScript 中，我们可以用 . 运算符来访问对象属性，如 obj.a.b.c，但如果其中某个属性不存在，就会抛出 TypeError，而且我们还需要进行繁琐的防御性编程，避免代码崩溃。这时候就需要引入 ES11 中的新特性——可选链操作符。
什么是可选链操作符
可选链操作符（Optional Chaining Operator）是 ES11 中的新特性，它可以让我们以简洁的方式进行对象嵌套查询，不需要担心查询到不存在的属性而导致代码崩溃。可选链操作符的写法是 ?.，它放在对象属性访问的后面，表示如果该属性存在，则继续访问；否则返回 undefined。
如何使用可选链操作符
接下来我们来看一个例子，假设我们需要查询一个用户的地址信息：
-- -------------------- ---- -------
----- ---- - -
--- --
----- -------
-------- -
------- ---- ---- ----
----- ---- ---------
------ ----
-
--
----- ------ - --------------------
-------------------- -- ---- ---- ---在上面的例子中，我们成功地查询到了用户的地址信息。但如果用户没有地址属性呢？
const user = {id: 1, name: 'John'};
const street = user.address.street;
console.log(street); // TypeError: Cannot read property 'street' of undefined此时，我们会得到一个 TypeError 错误，因为 user.address 是 undefined，而我们试图对 undefined 的 street 属性进行访问。为了避免这种错误，我们需要进行一些防御性编程：
const user = {id: 1, name: 'John'};
const street = user.address && user.address.street;
console.log(street); // undefined上面的代码中，我们使用了逻辑与运算符 &&，如果 user.address 存在，则继续访问 street 属性；否则返回 undefined，从而避免了代码崩溃。但这种写法看起来非常繁琐，而且如果需要查询的属性层数很多，就需要写很多这样的代码。
此时，可选链操作符就派上用场了。我们可以用可选链操作符来简化上述代码：
const user = {id: 1, name: 'John'};
const street = user.address?.street;
console.log(street); // undefined这里，如果 user.address 存在，则继续访问 street 属性；否则直接返回 undefined，避免了代码崩溃，并且代码写起来更加简洁清晰。
可选链操作符的进阶用法
除了简单的属性访问，可选链操作符还可以用于函数调用、数组访问等场景。我们来看一个例子，查询一个公司员工的部门信息和部门经理信息。
-- -------------------- ---- -------
----- ------- - -
----- ----- ------
------------ -
-
----- -----
-------- -
----- ------
------ --- --------
-
--
-
----- --------------
-------- -
----- --------
------ ------------ --------
-
-
-
--
----- ---------- - -----------------------
----- ------- - -------------------
------------------------- --------------- -- ------- ------------ --------上面的代码中，我们查询了 Engineering 部门的经理信息。但如果这个部门不存在，或者该部门没有经理，又该怎么办呢？我们可以使用可选链操作符进行查询：
-- -------------------- ---- -------
----- ------- - -
----- ----- ------
------------ -
-
----- -----
-------- -
----- ------
------ --- --------
-
--
-
----- -------------
-
-
--
----- ---------- - -----------------------
----- ------- - --------------------
-------------------------- ---------------- -- --------- ---------上面的代码中，我们使用可选链操作符进行了部门经理信息的查询。如果该部门不存在，直接返回 undefined；如果该部门没有经理，则返回经理对象的 undefined 属性值。这样我们就不需要进行繁琐的防御性编程，代码也更加简洁易读。
总结
可选链操作符是 ES11 中非常实用的特性，可以帮助我们简化对象嵌套查询的代码，避免代码崩溃，提高代码的可读性和可维护性。在实际开发中，我们应该充分利用可选链操作符，并掌握其各种用法，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648edcf848841e9894d44b4f