Javascript 即使map（）呈现的组件不是同级组件，也可以避免在同一数组上使用.map（）两次吗？

所以，我有一些工作代码，但我觉得有一个解决方案，我可以只使用一个.map（），但我没有看到它

这些组件不是兄弟（它们不共享相同的父组件），所以为了解决这个问题，我在同一个对象数组上做了两次.map（），但我觉得这是一种资源浪费，对于这种情况，必须有更好的解决方案

这是密码

<div className="pricepoints-form">
    <Tabs className="tabs">
        <TabList>
            {
                this.state.pricepointsData.map(pricepoint => (
                    <Tab className="tab">{pricepoint.name}</Tab>
                ))
            }
        </TabList>
        {
            this.state.pricepointsData.map(pricepoint => (
                <TabPanel>
                    <Pricepoint
                        pricepoint={pricepoint}
                        displayLast4={this.state.displayLast4}
                    />
                </TabPanel>
            ))
        }
    </Tabs>
</div>

{
this.state.pricepointsData.map（pricepoint=>(
{pricepoint.name}
))
}
{
this.state.pricepointsData.map（pricepoint=>(
))
}

即使map（）呈现的组件不是同级组件，也可以避免在同一数组上使用两次

.map（）

从技术上讲，是的，这是可能的。但让我们看看你在这里真正优化了什么

map

本质上是一个

for

循环，用于为新数组赋值：

// example
function map(transform) {
  const ret = []
  for (let i = 0; i < this.length; i++) {
    ret.push(transform(this[i], i, this))
  }
  return ret
}

//示例
函数映射（变换）{
常量ret=[]
for（设i=0；i

这意味着您可以用自己的函数替换map函数，该函数运行一个循环并创建两个数组：

函数myMap（transform1、transform2）{
常数r1=[]
常数r2=[]
for（设i=0；i

使用此新功能最多也会很尴尬：

const [tabs, panels] = myMap.call(this.state.pricepointsData, pricepoint => (...), pricepoint => (...))

...
<TabList>
  { tabs }
</TabList>
{ panels }
...

const[tabs，panels]=myMap.call（this.state.pricepointsData，pricepoint=>（…），pricepoint=>（…）
...
{tabs}
{面板}
...

所以真正的问题应该是：这种抽象值得吗

对此，我有一个反问题：

什么更大，2x1还是1x2

---

你可以使用两个循环，每个循环做一件事（2

map

调用），或者使用一个循环做两件事（1

myMap

调用）。

过早优化是万恶之源。我认为这段代码看起来不错，如果你在一张

map

中做任何事情，都会让它变得更加丑陋，对你的好处微乎其微。我看不到任何其他方法可以在不使用

map

或其他方法两次循环数据的情况下实现所需的布局。我也非常怀疑两次使用

map

是否会明显影响你的应用程序的性能。谢谢@Nathan和fubar，我就这样离开吧。我将把这个问题留一个小时，看看是否有人有什么想法不会很糟糕，如果没有，我将关闭这个。您可以这样做：

components=this.state.pricepointsData.map（pricepoint=>[（{pricepoint.name}），（）]）

。然后你最终会映射到上面来创建你的UI，尽管仍然有两个映射。你可以有一个函数，在列表中循环一次，构建两个单独的数组，然后在各自的父数组中呈现这两个数组。这样，您只需在数据数组中循环一次。但正如其他人所说，我真的不想麻烦，它没有那么整洁，而且很可能根本帮不上什么忙。即使你想把事情做得更好，还有很多事情比这更重要。谢谢你的anwser！

const [tabs, panels] = myMap.call(this.state.pricepointsData, pricepoint => (...), pricepoint => (...))

...
<TabList>
  { tabs }
</TabList>
{ panels }
...