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

Question

I have an array in which some elements are implicitly paired with other elements, but not necessarily adjacent. I use Array.map over this array to create JSX elements (not important) but I need to keep track between each iteration of if I've already seen an elements pair.

The code is effectively as such:

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

This already works as is, but I don't like that I need the extra pairedElementsSeen object which, because of the structure and length of the JSX, must be defined well in advance of where it is used. Is there some way with Array.map or else a similar function to be able to carry a variable like pairedElementsSeen between each iteration?

The only things I can think of would either be to

1. Extract this whole section into a dedicated for loop before all of the JSX, which I don't like because it displaces the behavior from the place where it is used, or
2. Create a one-off, instantly called arrow function with the persistent object defined within. I find these to be particularly un-intuitive when reading however and plus it will lose it's abilitiy to be combined inline with other array operations like sort or filter .

That would look like this ugly mess:

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

Any other ideas?

Answer 1

You could do it without the intermediate object (but less efficiently) like this:

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

O(n) way to do it (uses intermediate object but all in one array function call):

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