在前端开发中，我们经常需要获取某个对象属性的值。然而，当对象属性不存在时，JavaScript 会抛出 TypeError 错误。为避免这种错误，我们通常需要先检查对象属性是否存在，再尝试访问属性值。这是一个非常繁琐、易错的过程。
幸运的是，ECMAScript 2019 引入了一个新特性：可选链操作符（Optional chaining operator）（?.）。它可以让我们在访问对象的属性时，无需手动检查属性是否存在，从而简化代码、减少错误。
基本用法
可选链操作符（?.）用于简化访问链中的条件判断。
例如，我们需要获取深层次的嵌套对象属性值：
-- -------------------- ---- -------
----- ---- - -
---------- -------
--------- ------
-------- -
----- ----------
------- ----------------
-------- --------
-
--
--- ------- - ---
-- ----- -- ------------ -- --------------------- -
------- - ---------------------
-
--------------------- -- ------上面的代码检查了 user、user.address 和 user.address.zipcode 是否存在，如果存在，才将 user.address.zipcode 的值赋给 zipcode 变量。这是一种冗长、易错的写法。
使用可选链操作符（?.）后，代码变得更加简洁、易懂：
let zipcode = user?.address?.zipcode ?? ''; console.log(zipcode); // 100001
上面的代码通过可选链操作符（?.）实现了对 user、user.address 和 user.address.zipcode 的自动判断。如果其中任何一个属性不存在，则返回 undefined，最后使用 nullish coalescing 运算符（??）将 undefined 转成空字符串。
高级用法
可选链操作符还支持一些高级用法，用于处理数据的复杂情况。
函数调用
可选链操作符除了可以访问对象的属性值外，还可以调用对象的方法。
例如，我们有一个函数调用链：
const result = foo()?.bar()?.baz();
上面的代码尝试依次调用三个函数：foo、bar 和 baz。如果对象中任何一个函数不存在，则会返回 undefined。
空对象合并
在多个对象传递数据时，有时候我们需要访问多个对象的属性值，并当两个对象属性值都存在时，将它们合并。
以一个简单的示例为例：
-- -------------------- ---- -------
----- ---- - -
---------- -------
--------- ------
-------- -
----- ----------
------- ----------------
-------- --------
-
--
----- --------- - -
---- ---
------ ----------------------
--
----- -------- - --------------- - - - - -------------- -- ---
----- ------- - ------------- -- ---
----- ------- - - ------------- ---------- --
---------------------- -- ----- ----
--------------------- -- - ---- --- ------ ----------------------- -------- ---------上面的代码中，我们使用可选链操作符（?.）获取 user、user.firstName 和 user.lastName 的值，并使用 nullish coalescing 运算符（??）将 undefined 转成空字符串。同样，我们使用可选链操作符（?.）获取 user.address 的值，并使用空对象来代替不存在的地址。
最后，使用 Object.assign 方法将 userExtra 和 address 合并为 userAll 对象。
总结
可选链操作符是 ECMAScript 2019 中的一个重要特性，提高了 JavaScript 代码的可读性、可维护性，减少了开发的复杂度和错误。在开发过程中，我们可以通过学习可选链操作符的使用方法，进一步提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2f36bb5eee0b525a5844d