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