更好的/内联的方式来保持数组.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对象，因为JSX的结构和长度，必须在使用它之前很好地定义它。是否有某种方法与Array.map或其他类似的函数能够在每次迭代之间携带像pairedElementsSeen这样的变量?

我唯一能想到的就是

1. 在所有的之前将这整个section提取到一个专用的for循环中JSX，我不喜欢它，因为它取代了使用地点，或
2. 创建一个一次性的，即时调用的箭头函数对象定义的。然而，我发现这些在读取时特别不直观，而且它将失去与其他数组操作(如sort或filter)内联组合的能力。

看起来就像这样:

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

还有其他想法吗?

Answer 1

您可以不使用中间对象(但效率较低)，像这样:

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

O(n)种方法(使用中间对象，但都在一个数组函数调用中):

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}
</...>;