使用数组属性展平复杂对象数组答案

【问题标题】：Flattening an array of complex objects with an array attribute使用数组属性展平复杂对象数组
【发布时间】：2019-11-10 09:42:15
【问题描述】：

我想知道是否有快速的解决方案（例如使用 map()）将多维数组转换为一维数组，仍然保留原始数组的所有信息。

你可以用一些循环来解决它，但我认为必须有一个更聪明的解决方案。

为了解释更多，这里举个例子：

const arr = [{
  id: 1,
  people: [
    {name: "x", surname: "x"},
    {name: "y", surname: "y"}
  ]
 },{
  id: 2,
  people: [
    {name: "a", surname: "a"},
    {name: "b", surname: "b"}
  ]
 }]

const result = [
 {id: 1, name: "x", surname: "x"},
 {id: 1, name: "y", surname: "y"},
 {id: 2, name: "a", surname: "a"},
 {id: 2, name: "b", surname: "b"}
]

【问题讨论】：

标签： javascript arrays typescript object

【解决方案1】：

使用Array.flatMap() 和内部Array.map() 来添加id：

const arr = [{"id":1,"people":[{"name":"x","surname":"x"},{"name":"y","surname":"y"}]},{"id":2,"people":[{"name":"a","surname":"a"},{"name":"b","surname":"b"}]}]
 
const result = arr.flatMap(({ id, people }) => people.map(p => ({ id, ...p })))

console.log(result)

如果您的目标浏览器不支持Array.flatMap()，请使用Array.map()，并传播到Array.concat()：

const arr = [{"id":1,"people":[{"name":"x","surname":"x"},{"name":"y","surname":"y"}]},{"id":2,"people":[{"name":"a","surname":"a"},{"name":"b","surname":"b"}]}]
 
const result = [].concat(...arr.map(({ id, people }) => people.map(p => ({ id, ...p }))))

console.log(result)

【讨论】：

是否有一种聪明的方法可以将id 添加到数组中的每个对象？ flatMap() 认为正确，但 id 字段丢失。
错过了。您只需要映射人员，并添加 id。查看更新。

【解决方案2】：

您可以使用array.reduce 为每个people 创建多个条目，假设数组永远不会更改其形式。有关其工作原理的更多信息直接在代码中。

const arr = [{
  id: 1,
  people: [
    {name: "x", surname: "x"},
    {name: "y", surname: "y"}
  ]
 },{
  id: 2,
  people: [
    {name: "a", surname: "a"},
    {name: "b", surname: "b"}
  ]
 }]

// Reduce the origianal array.
const r = arr.reduce((acc, {id, people}) => {
  // For each people, push a new elemen to the array.
  return people.forEach(_people => {
    // the element pushed will hold the [id] and all the properties of the currently looped [people] item.
    acc.push(Object.assign({id}, _people));
  }), acc; // <-- finally, return the accumulator for the next iteration.
}, []); // <-- provide a new empty array as an initial value.
console.log(r);

【讨论】：

【解决方案3】：

你可以试试map()和flat()

const arr = [{
  id: 1,
  people: [
    {name: "x", surname: "x"},
    {name: "y", surname: "y"}
  ]
 },{
  id: 2,
  people: [
    {name: "a", surname: "a"},
    {name: "b", surname: "b"}
  ]
 }]

const result = arr.map(p => {
  return p.people.map(pi => Object.assign(pi, {id: p.id}));
}).flat();
console.log(result);

【讨论】：