JavaScript如何映射两个数组和一个对象

我有一个包含一些字段的对象，其中三个是数组。 我想一次就把它们画出来

让我展示一下我现在是如何做的：

containerNames = this.state.fileContent.xContainers.map(xContainer => <Container containerName={xContainer} />);

containerNames.push(this.state.fileContent.yContainers.map(yContainer => <Container containerName={yContainer} />));

containerNames.push(this.state.fileContent.zContainers.map(zContainer => <Container containerName={zContainer} />));

containerNames=this.state.fileContent.xContainers.map（xContainer=>）；
push（this.state.fileContent.yContainers.map（yContainer=>）；
push（this.state.fileContent.zContainers.map（zContainer=>）；

---

对我来说，似乎可以做得不同。使用一个lambda？

您希望创建一个数组数组，因此使用嵌套在另一个数组中的

.map

：

const { xContainers, yContainers, zContainers } = this.state.fileContent;
containerNames = [xContainers, yContainers, zContainers].map(
  containers => containers.map(container => <Container containerName={container} />)
);

const{xContainers，yContainers，zContainers}=this.state.fileContent；
containerNames=[xContainers，yContainers，zContainers].map(
containers=>containers.map（container=>）
);
OP中的代码将生成类似于
[1，2，3，[4，5，6]，[7，8，9]
，我希望这不是您想要的。如果您想要
[1,2,3,4,5,6,7,8,9]
，请使用以下命令：

const containerNames = ["xContainers", "yContainers", "zContainers"].
    flatMap(field => this.state.fileContent[field].map(...));

如果您想要
[[1,2,3]，[4,5,6]，[7,8,9]
，那么将
平面图更改为
地图
常量{fileContent:{xContainers，yContainers，zContainers}=this.state；
const {fileContent : {xContainers, yContainers, zContainers}} = this.state;

const mergedArray = [
   ...xContainers,
   ...yContainers,
   ...zContainers
]

const containerNames = mergedArray.map(container => <Container containerName={container} />)


常量合并Darray=[
…除容器外，
…Y容器，
…zContainers
]
const containerNames=mergedArray.map（container=>）
containerNames=[…xContainers，…yContainers，…zContainers].map(
containers=>containers.map（container=>）
);
在
mapToContainer
函数中，将
c
参数传递给您的


const allow=['xContainers'，'yContainers'，'zContainers']
常量文件内容={
xContainers:[{name:'1'}，{name:'2'}，{name:'3'}]，
Y容器：[{name:'1'}，{name:'2'}，{name:'3'}]，
zContainers:[{name:'1'}，{name:'2'}，{name:'3'}]，
foo:{}
}
const-mapToContainer=containers=>containers.map（c=>c.name）
常数容器名称=
Object.keys（文件内容）
.filter（k=>allow.indexOf（k）！=-1）
.reduce（（prev，curr）=>[…prev，…mapToContainer（fileContent[curr]）]，[]）
log（containerNames）
如果要合并这三个数组并映射它们，可以按如下操作

[...xContainers, ...yContainers, ...zContainers].map(c => <Container containerName={c} />)

[…xContainers，…yContainers，…zContainers].map（c=>）

如果你对额外的LIB没意见，你可以使用lodash

_.map(_.concat(xContainers, yContainers, zContainers), c => (<Container containerName={c} />))

\uu.map（u.concat（xContainers，ycContainers，zContainers），c=>（））
这仍然是嵌套的。OP正在寻找数组数组，因此无法避免嵌套一次。嗯。。。。我认为他的原始代码做错了什么，第一个数组不是嵌套的，但是另外两个是。很好，我会在一个链中而不是嵌套的：
[x，y，z].flatMap（f=>fileContent[f]）.map（name=>etc
Hi，请不要只发布代码答案，解释代码的作用和原因。
_.map(_.concat(xContainers, yContainers, zContainers), c => (<Container containerName={c} />))