TS 数组和函数方法的可选链

5 min read

从 v3.7 可用

这是当你尝试访问嵌套数据时的一个痛点,嵌套数据越多,代码就会变得越繁琐。

在下面的例子中,要访问 address,你必须遍历 data.customer.address,而且 datacustomer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

现在你可以用 .? 运算符来选择性地对数据访问。通过这种方式,如果存在尚未定义的父级对象,则会在链中的任何位置返回未定义,而不是在运行时崩溃。

写麻了的写法

if (data && data.customer && data.customer.address) {
   const {address} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

这里注意数组和方法的写法

const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

// 也适用于数组
customers?.[0]?.['address']

// 检查方法是否已定义并调用
customer.approve?.()