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

【问题标题】：Is it possible to combine optional chaining with arrays and map (in Javascript)?是否可以将可选链接与数组和映射（在 Javascript 中）结合起来？
【发布时间】：2020-05-26 15:15:22
【问题描述】：

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

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

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

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

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

【问题讨论】：

看起来很漂亮的捷径。如果它有效，那就去吧
为什么是卷曲？如果是对象，则缺少键。
@NinaScholz 这是 JSX 语法 - { 可以放在某些位置（如作为道具或元素的子元素）以插入以下 JS 表达式的计算结果。例如 <div>{ true ? 'foo' : 'bar' }</div> 结果为 <div>foo</div>。

标签： javascript reactjs ecmascript-next

【解决方案1】：

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

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

How to use optional chaining with array in Typescript?

Using optional chaining operator for object property access

【讨论】：

也许值得注意的是，如果数组存在但为空，则会崩溃。

【解决方案2】：

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

当一个孩子被评估为undefined时，它是just won't render。

条件渲染已经是相当普遍的策略。以前，当您有一个可能是数组或可能是undefined 的东西，并且您想要映射 if 有一个数组时，您必须执行以下操作：

{ items && items.map( ...

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

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

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

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

【讨论】：

【解决方案3】：

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

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

在此处阅读更多信息：MDN Web Docs: Optional chaining

【讨论】：

如果不知道items 是否是数组，这可能会有所帮助，但如果确定它是数组还是undefined，则不需要第二个@ 987654325@
是的，但由于他说他刚刚开始学习可选链，我只是在展示如何仅使用可选链来完成它，不一定是最好的方法。