在前端开发中，我们常常需要访问深层嵌套的对象属性。传统的访问方式可能会因为某个属性不存在而抛出异常，为了解决这个问题，ECMAScript 2020 引入了可选链和 Nullish 合并运算符，让深层对象读取变得更加简单和安全。
可选链
可选链是一种语法糖，用于访问嵌套对象的属性，它可以在属性不存在时返回 undefined 而不是抛出异常。可选链的语法是 ?.，它可以放在任意属性访问操作符的后面。
下面是一个示例代码：
----- ---- - -
----- -------
-------- -
----- ---- ------
------- ---- -------
-
--
------------------------------- -- ---- -----
---------------------------------- -- ---------
------------------------ -- ------------------- -- ---- -----
------------------------ -- ---------------------- -- ---------
-------------------------------- -- ---- -----
----------------------------------- -- ---------这段代码中，我们定义了一个包含嵌套属性的对象 user。在访问 user.address.city 时，如果 address 属性不存在，就会抛出异常。使用可选链可以避免这种情况的发生，如果 address 不存在，那么 user.address.city 的值就会是 undefined。
Nullish 合并运算符
Nullish 合并运算符是一种语法糖，用于在某个属性值为 null 或 undefined 时，返回默认值。它的语法是 ??，它可以放在任意表达式的中间。
下面是一个示例代码：
----- ---- - -
----- -------
-------- -
----- ---- ------
-------- ----
-
--
-------------------------------- -- ----------- -- ----
------------------------------------ -- ----------- -- ---------这段代码中，我们定义了一个包含嵌套属性的对象 user。在访问 user.address.zipCode 时，它的值为 null，但是我们并不希望使用默认值，因此使用了 Nullish 合并运算符。在访问 user.address.phoneNumber 时，它的值为 undefined，因此使用了默认值 'unknown'。
可选链和 Nullish 合并运算符的组合使用
可选链和 Nullish 合并运算符可以组合使用，用于访问深层嵌套的对象属性，并在属性值为 null 或 undefined 时返回默认值。下面是一个示例代码：
----- ---- - -
----- -------
-------- -
----- ---- ------
-------- ----
-
--
--------------------------------- -- ----------- -- ----
------------------------------------- -- ----------- -- ---------这段代码中，我们定义了一个包含嵌套属性的对象 user。使用可选链和 Nullish 合并运算符可以避免访问不存在的属性时抛出异常，并在属性值为 null 或 undefined 时返回默认值。
总结
可选链和 Nullish 合并运算符是 ECMAScript 2020 中的两个新特性，它们可以帮助我们更加方便、安全地访问深层嵌套的对象属性。在实际开发中，我们可以使用它们来简化代码并提高代码的可读性和健壮性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/660d2c73d10417a222d91680