是否可以将可选链接与数组和映射（在 Javascript 中）结合起来？

Question

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

我注意到我一直在将它与数组map一起使用，即使没有考虑太多——这似乎是一种自然的用途（这里的items是一个数组，或者可能是undefined ）

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

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

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

Answer 1

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

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

如何在 Typescript 中使用带有数组的可选链接？

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

Answer 2

如果链接失败，表达式将评估为undefined 。

当孩子被评估为undefined时，它不会呈现。

条件渲染已经是相当普遍的策略。 以前，当您有可能是数组或undefined的东西时，如果有数组，您想要映射，您将不得不执行以下操作：

{ items && items.map( ...

这是有效的，因为如果items是undefined ，整个表达式将被评估为undefined ，并且不会发生渲染，也不会引发错误。

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

可选链接是第 4 阶段，因此您可以指望它可靠地工作。

数组是对象。 但是可选链不仅仅适用于对象——它可以适用于任何可能具有属性或方法的东西。 例如，如果foo为null 、 undefined或数字（数字有toFixed方法）， const bar = foo?.toFixed(2)就可以正常工作。

Answer 3

解决问题的可选链接方式是：

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

在此处阅读更多内容： MDN Web 文档：可选链接

Answer 4

通过过滤使用以下系统从 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>
    )
})