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

Question

我确实有一个包含一些字段的对象，其中三个是数组。我想一口气映射它们。

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

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

对我来说，它似乎可以以不同的方式制作。用一个 lambda？

Answer 1

您要创建一个数组数组，因此请使用.map嵌套在另一个数组中：const { xContainers, yContainers, zContainers } = this.state.fileContent;containerNames = [xContainers, yContainers, zContainers].map(&nbsp; containers => containers.map(container => <Container containerName={container} />));

Answer 2

OP 中的代码将类似于[1, 2, 3, [4, 5, 6], [7, 8, 9]]，我希望这不是您想要的。如果你想[1, 2, 3, 4, 5, 6, 7, 8, 9]，使用这个：const containerNames = ["xContainers", "yContainers", "zContainers"].&nbsp; &nbsp; flatMap(field => this.state.fileContent[field].map(...));如果需要[[1, 2, 3], [4, 5, 6], [7, 8, 9]]，请将其更改flatMap为map。

Answer 3

在mapToContainer函数中将c参数传递给您<Container containerName={c} />const allow = ['xContainers', 'yContainers', 'zContainers']const fileContent = {&nbsp; xContainers: [{name: '1'}, {name: '2'}, {name: '3'}],&nbsp; yContainers: [{name: '1'}, {name: '2'}, {name: '3'}],&nbsp; zContainers: [{name: '1'}, {name: '2'}, {name: '3'}],&nbsp; foo: {}}const mapToContainer = containers => containers.map(c => c.name)const containerNames =&nbsp;&nbsp; Object.keys(fileContent)&nbsp; .filter(k => allow.indexOf(k) !== -1)&nbsp; .reduce((prev, curr) => [...prev, ...mapToContainer(fileContent[curr])], [])console.log(containerNames)