使用 ES10 的可选链语法处理前端数据异常情况

在前端开发中，经常会遇到访问嵌套对象或嵌套数组的情况，但有时候对象或数组中的一层或多层可能是 null 或 undefined，这时候我们需要对数据进行一些处理来避免程序崩溃。本文介绍如何使用 ES10 的可选链语法来优雅地处理这种数据异常情况。

可选链语法

在 ES10 中，新增了可选链语法，可以使用 ?. 来判断是否存在属性或方法再进行相应的操作。例如：

const obj = {
  foo: null
}
console.log(obj.foo.bar) // TypeError: Cannot read property 'bar' of null
console.log(obj.foo?.bar) // undefined

在这个例子中，obj.foo 是 null，如果直接访问 obj.foo.bar 会报错，但使用了可选链语法 obj.foo?.bar，会先判断 obj.foo 存不存在，如果存在则返回 bar 属性的值，否则返回 undefined。

处理异常情况

接下来我们通过一个实际的例子来演示如何使用可选链语法处理异常情况。假设我们有一个嵌套对象如下：

-- -------------------- ---- -------
----- ---- - -
  ----- ------
  -------- -
    ---- ---
    -------- -
      ------ ------------------
      ------ ------------
    -
  --
  ------- --
-

我们想要获取用户的邮箱和第一个订单的 id。如果我们直接使用 user.profile.contact.email 和 user.orders[0].id 来获取这些数据，有可能出现以下异常情况：

1. profile 对象、contact 对象或者 user.orders[0] 可能为 null 或 undefined，导致程序崩溃；
2. profile 对象、contact 对象或者 user.orders[0] 中可能缺少相应的属性或方法，导致返回 undefined。

这时候我们可以使用可选链语法来处理这些异常情况：

const email = user.profile?.contact?.email
const orderId = user.orders?.[0]?.id

在这个例子中，如果 user.profile、user.profile.contact 或 user.orders[0] 中任意一层不存在或缺少相应属性或方法，都不会导致程序崩溃，而是会返回 undefined。

总结

使用可选链语法可以优雅地处理前端数据异常情况，避免程序崩溃。但需要注意的是，可选链语法只能在支持 ES10 的环境中使用，如果要兼容旧版本的浏览器，可以使用相关的 polyfill。

最后，强烈建议在日常开发中积累使用技巧与经验，善于使用新的语法糖，提高代码的可读性、可维护性和健壮性，为编写高质量的前端代码打下稳固的基础。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492b9d648841e9894087011