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

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

Answer 1

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]]，请将flatMap更改为map。

Answer 2

您要创建一个数组数组，因此请使用嵌套在另一个数组中的.map：

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

Answer 3

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

Answer 4

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

Answer 5

在mapToContainer函数中，将c参数传递给您的<Container containerName={c} />

const allow = ['xContainers', 'yContainers', 'zContainers']
const fileContent = {
xContainers: [{name: '1'}, {name: '2'}, {name: '3'}],
yContainers: [{name: '1'}, {name: '2'}, {name: '3'}],
zContainers: [{name: '1'}, {name: '2'}, {name: '3'}],
foo: {}
}
const mapToContainer = containers => containers.map(c => c.name)
const containerNames = 
Object.keys(fileContent)
.filter(k => allow.indexOf(k) !== -1)
.reduce((prev, curr) => [...prev, ...mapToContainer(fileContent[curr])], [])
console.log(containerNames)

Answer 6

如果你想合并三个数组并映射它们，你可以像下面这样做

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

如果你对额外的库没问题，你可以使用 Lodash

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