是否可以将可选的链接与数组和映射(在Javascript中)结合起来?



我最近了解了Javascript中的可选链接,并在React/NodeJS项目中使用它。 效果很好。

我注意到我一直在map数组中使用它,即使没有考虑太多 - 这似乎是一种自然用途(这里items是一个数组,或者可能是undefined(

{items?.map(postListItem => ....

也就是说,如果items存在,它将映射,但如果itemsundefined则不会映射,但如果我要在undefined上调用map,它将避免任何运行时错误

尽管如此,我不知道这是否是可接受的用法,或者我是否滥用了可选链接。 我搜索了一个答案,但到目前为止还没有找到一个,这让我怀疑我滥用了它。 任何信息非常感谢!

请参阅此处有关打字稿用法的答案。 数组空安全可选链接需要一个句点。

this.mostRecentMfaAttempt = this.verificationsAttempts?.content?.[0]

如何在打字稿中使用可选的数组链接?

使用可选的链接运算符进行对象属性访问

如果链接失败,表达式的计算结果将为undefined

当一个孩子被评估为undefined时,它只是不会渲染。

条件渲染已经是一种相当常见的策略。以前,当您有可能是数组或可能是undefined的东西时,并且您想要映射是否存在数组,则必须执行以下操作:

{ items && items.map( ...

这是因为,如果undefineditems,整个表达式将被计算为undefined,并且不会发生渲染,也不会抛出任何错误。

使用可选链接的工作方式完全相同,只是它更简洁。所以是的,这是一件完全有效的事情。

可选链接是第 4 阶段,因此您可以依靠它可靠地工作。

数组是对象。但可选链接不仅适用于对象- 它可以适用于可能具有属性或方法的任何内容。例如,如果foonullundefined或数字(数字有toFixed方法(,则const bar = foo?.toFixed(2)工作正常。

问题的可选链接方式是:

{items?.map?.(postListItem => ....)

阅读更多:MDN Web 文档:可选链接

要通过过滤从MongoDB数据库获取数据,请使用下面的系统。

cars.filter(car => car.email === user.email)?.map(car => {
return (
<tr key={car._id}>
<td>{car.userName}</td>
<td className=''>{car.email}</td>
<td>{car.name}</td>
<td><img src={car.img} alt="" /></td>
</tr>
)
})

最新更新