在前端开发中,我们经常会遇到 undefined 和 null 的错误。一种常见的处理方式是使用 if 判断,如果变量存在再去调用它的属性或方法,比如:
-- ----- -- ---------- - ----------------------- -
但是这样的代码显得冗长,尤其是在深度嵌套的对象中。为了解决这个问题,ES11 中引入了 Optional Chaining 操作符。
Optional Chaining 操作符
Optional Chaining 操作符是一个问号(?)后面跟随着点号(.)或方括号([])。它可以安全地访问一个深度嵌套的对象的属性或方法,如果属性或方法不存在则返回 undefined,不会抛出错误。
----- ---- - -----------
如果 user 不存在或者 user 没有 name 属性,则 name 的值为 undefined。
----- ----- - -----------------------
如果 user 或 messages 不存在,则 count 的值为 undefined。
使用 Optional Chaining 操作符的示例
下面来看一个示例,假设有一个用户对象,包含了基本信息和地址信息。
----- ---- - - ----- ------ ---- --- -------- - ------- ---- ---- ---- ----- ---- ----------- ------ ---- - --
现在我们要获取用户的邮政编码(zip),如果没有则显示默认值(00000):
----- --- - ---------------- -- -------- ----------------- -- -- -------
如果使用 Optional Chaining 操作符,则可以简化这段代码:
----- --- - ----------------- -- -------- ----------------- -- -- -------
注意,这里使用了 Nullish Coalescing 操作符(??)来判断 zip 的值是否为 null 或 undefined。
再来看一个示例,假设有一个订单对象,包含了订单号和交付信息。
----- ----- - - --- --------- --------- - -------- - ------- ---- ---- ---- ----- ---- ----------- ------ ----- ---- ------- - - --
现在我们要获取订单的货运地址(delivery address),如果没有则显示默认值(None):
----- --------------- - ---------------------- -- ------- ----------------------------- -- -- -------- ---- ---- ---- ----- ---- ----------- ------ ----- ---- --------
如果使用 Optional Chaining 操作符,则可以简化这段代码:
----- --------------- - ----------------------- -- ------- ----------------------------- -- -- -------- ---- ---- ---- ----- ---- ----------- ------ ----- ---- --------
注意事项
- Optional Chaining 操作符只能在 ES11 中使用,如果要在旧版的 JavaScript 中使用,可以使用 Lodash.js 或自己实现类似的功能。
- Optional Chaining 操作符只能作用于对象属性和方法(即点号和方括号的后面),不能作用于函数或变量名。
- Optional Chaining 操作符在链式访问中很有用,但是如果链式访问过于复杂,要进行重新设计以简化代码。
总结
Optional Chaining 操作符为解决 undefined 和 null 的错误提供了很好的解决方法,可以使代码更简洁、更易读。在实际开发中,建议结合 Nullish Coalescing 操作符一起使用,以确保代码的健壮性和可读性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6469a8e0968c7c53b0983abc