作为前端开发工程师，我们在日常开发中经常需要处理非常复杂的数据结构，而 JavaScript Optional Chaining 和 Nullish Coalescing 操作符是两个非常重要的语法糖，可以帮助我们更高效地处理和转换数据。本文将介绍这两个操作符，以及如何在实际开发中使用它们。
Javascript Optional Chaining
当我们尝试从一个多重嵌套的对象中获取一个属性值时，我们经常需要先检查每个对象是否存在。例如：
-- -------------------- ---- -------
----- ---- - -
--- ----
----- ----- -----
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
-- ----- -- ------------ -- ------------------ -
-- -- ---------
-这段代码非常冗长，尤其是当我们需要检查更多的属性时。为了简化这个过程，我们可以使用 Optional Chaining 操作符 ?. ，它允许我们直接访问多层嵌套的对象属性，而不需要检查每个对象是否存在。例如：
-- -------------------- ---- -------
----- ---- - -
--- ----
----- ----- -----
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
-- --------------------- -
-- -- ---------
-这段代码更简洁，也更易读。当 user 或 user.address 为 undefined 或 null 时，Optional Chaining 不会抛出错误，而是返回 undefined 。
我们还可以将 Optional Chaining 与其他 JavaScript 操作符一起使用，例如：
-- -------------------- ---- -------
----- ---- - -
--- ----
----- ----- -----
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
----- ---- - ------------------- -- ----------这个代码片段使用了 Nullish Coalescing 操作符，我们将在下一节中介绍。
Nullish Coalescing
在 JavaScript 中，我们经常需要提供默认值，以防止变量为 null 或 undefined 。我们通常使用短路运算符 || 来实现这一点，例如：
const name = user.name || "Unknown";
如果 user.name 为 null 或 undefined ，这段代码将返回 "Unknown" ，否则返回 user.name 自身的值。然而，这种方法有一个缺陷，即当 user.name 的值为 '' 或 0 时，它也会被视为假值，从而返回默认值。
为了避免这个问题，我们可以使用 Nullish Coalescing 操作符 ?? ，它只在左侧操作数为 null 或 undefined 时返回右侧操作数。例如：
const name = user.name ?? "Unknown";
当 user.name 的值为 null 或 undefined 时，这段代码将返回 "Unknown" ，否则返回 user.name 自身的值。注意，当 user.name 的值为 '' 或 0 时，返回的值是 '' 或 0 ，而不是默认值。
我们可以将 Optional Chaining 和 Nullish Coalescing 结合起来使用，例如：
const city = user?.address?.city ?? "Unknown";
这个代码片段使用了 Optional Chaining 和 Nullish Coalescing 操作符，它将返回 user.address.city 的值，如果为 null 或 undefined ，则返回默认值 "Unknown" 。
总结
JavaScript Optional Chaining 和 Nullish Coalescing 操作符是两个非常有用的语法糖，可以帮助我们更高效地处理和转换数据。使用 Optional Chaining 我们可以避免繁琐的多重嵌套级联，使用 Nullish Coalescing 我们可以安全地提供默认值。在实际的开发过程中，我们可以灵活地使用这两个操作符，以优化我们的代码结构。
示例代码
下面是一些示例代码，演示如何使用 Optional Chaining 和 Nullish Coalescing 操作符。
-- -------------------- ---- -------
----- ---- - -
--- ----
----- ----- -----
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
-- -- -------- --------
-- --------------------- -
----------------- ----- -----------------------
-
-- -- ------- ----------
----- ---- - --------- -- ----------
----------------- ----- ----------
-- ----
----- ---- - ------------------- -- ----------
----------------- ----- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456a3ec968c7c53b09ad35a