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