ECMAScript 2020 中的可选链和 Nullish 合并运算符实现深层对象读取

在前端开发中,我们常常需要访问深层嵌套的对象属性。传统的访问方式可能会因为某个属性不存在而抛出异常,为了解决这个问题,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