如何将两个不同的数组数据渲染到一个对象数组中？答案

【问题标题】：How to render two different arrays data into a single array of objects?如何将两个不同的数组数据渲染到一个对象数组中？
【发布时间】：2021-07-05 22:37:30
【问题描述】：

在我的反应状态下，我有数据进入两个不同的数组，我希望我的组件到 put both arrays data in a single array。这是两个数组的数据格式：

data: {
  array1: [
    {
      name: "John Doe"
    },
    {
      name: "Bob Williams"
    }
  ]

  array2: [
    {
      name: "Clark Kent"
    },
    {
      name: "Bruce Wayne"
    }
  ]
}

如何让我的代码返回数据，以便最终结果如下所示：

_.map(Object.values(this.state.data), (item,key) => {
  return _.map(item, (data) => {
    return {
      name: data.name
    }
  })
})

期望的输出：

data: [
  { name: "John Doe" },
  { name: "Bob Williams" },
  { name: "Clark Kent" },
  { name: "Bruce Wayne" }
]

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

您可以使用Spread operator ... 将两个数组合并为一个。

const data = {array1:[{name:"John Doe"},{name:"Bob Williams"}],array2:[{name:"Clark Kent"},{name:"Bruce Wayne"}]};;

const result = {data: [...data.array1, ...data.array2]};
console.log(result);

【讨论】：

感谢 Nguyen 的回复。这看起来不错。如果我在两个数组中都有其他属性并且我想定位其他属性以在页面上显示数据，这是否也有效？
是的，是@Shaun

【解决方案2】：

使用Array.prototype.flat()

const data = Object.values(this.state.data).flat();

【讨论】：

【解决方案3】：

Object.values(this.state.data).reduce((p, c) => p.concat(c), []);

【讨论】：