如何展平包含数组的对象数组？

Question

我想将项目展平为一个对象数组并接收一个新的结果数组。我怎样才能实现它？

这种方法不起作用：

const group = [{
    idGroup: 1,
    member: [{
      name: "Tim"
    }, {
      name: "Sina"
    }]
  }],
}];

const result = [{
    idGroup: 1,
    name: "Tim"
  },
  {
    idGroup: 1,
    name: "Sina"
  },
]



const result = group.reduce((r, obj) => r.concat(obj.member), []);

console.log(result)

Answer 1

您可以映射嵌套对象。

const
    group = [{ idGroup:1, member: [{ name: "Tim" }, { name: "Sina" }] }];
    result = group.reduce(
        (r, { idGroup, member }) => [...r, ...member.map(({ name }) => ({ idGroup, name }))],
        []
    );

console.log(result);

或者使用即将到来的Array#flatMap。

const
    group = [{ idGroup:1, member: [{ name: "Tim" }, { name: "Sina" }] }];
    result = group.flatMap(({ idGroup, member }) =>
        member.map(({ name }) => ({ idGroup, name })));

console.log(result);

Answer 2

您可以使用flatMap() 并在member 对象数组上使用map()。

const group = [
 {
  idGroup:1,
  member: [{name: "Tim"}, {name: "Sina"}],
 }
];

const res = group.flatMap(x => x.member.map(a => ({...a,idGroup:x.idGroup})));
console.log(res)

Answer 3

您也需要使用map（制作新项目）：

const group = [{idGroup:1,member:[{name: "Tim"},{name: "Sina"}]}];
const result = group.reduce((acc, { idGroup, member }) => acc.concat(member.map(({ ...props }) => ({ ...props, idGroup }), [])), []);
console.log(result);

Answer 4

您可以像这样使用Array.prototype.reduce() 和Array.prototype.forEach()：

const group = [{
  idGroup: 1,
  member: [{name: "Tim"}, {name: "Sina"}],
}, {
  idGroup: 2,
  member: [{name: "Jo"}, {name: "Eric"}]
}];

const result = group.reduce((acc, { idGroup, member }) => {
  member.forEach(({ name }) => acc.push({ idGroup, name }));
  return acc;
}, []);

console.log(result);

Answer 5

良好的旧循环也可以工作。

const group =
[{
    idGroup: 1,
    member: [{
      name: "Tim"
    }, {
      name: "Sina"
    }]
},
{
    idGroup: 2,
    member: [{
      name: "foo"
    }, {
      name: "bar"
    }, {
      name: "42"
    }]
}];

let result = [];

group.forEach((elem) => {
  elem.member.forEach((subElem) => {
    result.push({ idGroup: elem.idGroup, name: subElem.name });
  });
});

console.log(result);