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(

  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"].

    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 = {

  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)