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

Question

我最近在 Javascript 中了解到 optional chaining，并一直在 React/NodeJS 项目中使用它。效果很好。

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

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

也就是说，如果 items 存在，它会映射，但如果 items 是 undefined，它不会映射，但如果我要在 undefined

上致电 map

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

Answer 1

如果链接失败，表达式将计算为 undefined。

当 child 被评估为 undefined 时，它 just won't render.

条件渲染已经是一种很常见的策略。以前，当你有一些东西可能是一个数组或者可能是 undefined，并且你想映射如果有一个数组，你将不得不做这样的事情：

{ items && items.map( ...

这是有效的，因为如果 items 是 undefined，整个表达式将计算为 undefined，并且不会发生渲染，也不会抛出任何错误。

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

可选链接是 stage 4，因此您可以信赖它可靠地工作。

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

Answer 2

您的问题的可选链接方式是：

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

在此处阅读更多内容：MDN Web Docs: Optional chaining

Answer 3

在此处查看有关打字稿用法的答案。您需要一个句点来进行数组 null 安全可选链接。

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

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>
    )
})

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

Is it possible to combine optional chaining with arrays and map (in Javascript)?

javascript

reactjs

ecmascript-next