JavaScript 中有时我们需要在处理数据时使用 Optional Chaining 或 nullish coalescing，而通过同时使用这两种语法可以更好地处理一些复杂的数据场景。在本文中，我们将介绍如何同时使用 Optional Chaining 和 nullish coalescing，并提供相关示例代码。
什么是 Optional Chaining？
Optional Chaining 在 JavaScript 中是一个相对较新的语法特性 。它允许我们在检查一个对象的成员属性时，可以直接使用问号（?）进行判断。
以下是一个使用 Optional Chaining 的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- --------
-
--
-----------------------------------
-- -- ------
--------------------------------------
-- -- ---------在这个示例中，我们使用了 person?.address?.city 和 person?.address?.zipCode 两个语法。如果使用普通的点语法，我们可能要进行复杂的 null 判断，但是使用 Optional Chaining，我们可以通过 ?. 判断对象是否存在，如果不存在就会返回 undefined。
什么是 nullish coalescing？
与 Optional Chaining 类似，nullish coalescing 也是一个相对新的语法特性。它允许我们在取值时，当变量的值为 null 或 undefined 时，取一个默认值。
以下是一个使用 nullish coalescing 的示例代码：
const x = null ?? 'default'; console.log(x); // 输出 default const y = 0 ?? 'default'; console.log(y); // 输出 0
在这个示例中，我们使用了 ?? 语法取变量的值，并给定了一个默认值。如果变量的值为 null 或 undefined，那么默认值就会被返回。
如何同时使用 Optional Chaining 和 nullish coalescing？
在一些场景下，我们需要同时使用 Optional Chaining 和 nullish coalescing。比如在获取多层嵌套的对象属性时，可能会出现对象或者属性不存在的情况，我们可以在 Optional Chaining 操作后使用 nullish coalescing 进行默认值的赋值。
以下是一个同时使用 Optional Chaining 和 nullish coalescing 的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- --------
-
--
----- ------- - ------------------------ -- ------
---------------------
-- -- ---
----- --------- - ------------ -- ------------
-----------------------
-- -- ----在这个示例中，我们用 person?.address?.zipCode ?? 'N/A' 获取 zipCode 属性的值，同时给了一个默认值 'N/A'。如果 zipCode 属性不存在或者为空，则返回默认值。我们也可以在取 name 属性的值时使用 nullish coalescing，确保属性值不为 null 或 undefined。
使用 Optional Chaining 和 nullish coalescing 能够让我们更加方便地处理对象的属性和值，尤其在复杂的数据场景中大有作用。
总结
本文介绍了 JavaScript 中如何同时使用 Optional Chaining 和 nullish coalescing。尽管这些语法特性都比较新，但是它们已经被越来越多的开发者使用。如果你在处理对象的属性和值时遇到了困难，那么可以考虑使用这两种语法进行简便操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9a237add4f0e0ff21f24b