在 Array.map() 的每次迭代之间保留变量的更好/内联方法？

Question

我有一个数组，其中一些元素与其他元素隐式配对，但不一定相邻。 我在这个数组上使用Array.map来创建 JSX 元素（不重要）但是我需要在每次迭代之间跟踪我是否已经看到一个元素对。

代码实际上是这样的：

let pairedElementsSeen= {};
return <...>
    {myArray.map(elem => {
        if (elem.pairKey in pairedElementsSeen) {
            return secondaryOption;
        }
        else {
            pairedElementsSeen[elem.key] = someValue;
            return defaultOption;
        }
    )}
</...>;

这已经按原样工作，但我不喜欢我需要额外的pairedElementsSeen object ，由于 JSX 的结构和长度，必须在使用它之前很好地定义它。 Array.map或类似的 function 是否有某种方法能够在每次迭代之间携带像pairedElementsSeen这样的变量？

我唯一能想到的就是

1. 将整个部分提取到所有 JSX 之前的专用 for 循环中，我不喜欢它，因为它取代了使用它的地方的行为，或者
2. 创建一个一次性的，立即称为箭头 function，其中定义了持久性 object。 然而，我发现这些在阅读时特别不直观，而且它会失去与sort或filter等其他数组操作内联组合的能力。

这看起来像这样丑陋的一团糟：

return <...>
    {(() => {
        let pairedElementsSeen = {};
        return myArray.map(...);
    })()}
</...>;

还有其他想法吗？

Answer 1

您可以在没有中间 object 的情况下这样做（但效率较低），如下所示：

return <...>
    {myArray.map((elem, i, arr) => {
        const pairedElementSeen = arr.findIndex(e => e.key === elem.pairKey) < i;
        return pairedElementSeen ? secondaryOption : defaultOption;
    })}
</...>;

O(n) 方法（使用中间 object 但全部在一个数组 function 调用中）：

return <...>
    {myArray.reduce((agg, elem) => {
      if (elem.pairKey in agg.pairedElementsSeen) {
        agg.results.push(secondaryOption);
      } else {
        agg.pairedElementsSeen[elem.key] = true;
        agg.results.push(defaultOption);
      }

      return agg;
    }, { pairedElementsSeen: {}, results: [] }).results}
</...>;