JavaScript取消对象中数据的分组

Question

我正在尝试压平下面的数据结构，我觉得必须有一个很好的方法来做到这一点，而无需手动迭代每个元素来手动构建它。

[{
group: 'abc',
data: [{
name: 'John',
age: 10
}, {
name: 'Alice',
age: 15
}]
}, {
group: 'def',
data: [{
name: 'Scott',
age: 20
}, {
name: 'Tamar',
age: 25
}]
}]

我希望它是这样的(所以这个组和数据在一起(：

[{
group: 'abc',
name: 'John',
age: 10
}, {
group: 'abc',
name: 'Alice',
age: 15
}, {
group: 'def',
name: 'Scott',
age: 20
}, {
group: 'def',
name: 'Tamar',
age: 25
}]

任何想法都将不胜感激。

Answer 1

用Array.flatMap()迭代数组，然后映射每组，并使用对象排列构建新对象：

const arr = [{"group":"abc","data":[{"name":"John","age":10},{"name":"Alice","age":15}]},{"group":"def","data":[{"name":"Scott","age":20},{"name":"Tamar","age":25}]}]
const result = arr.flatMap(({ group, data }) => data.map(o => ({ group, ...o })))
console.log(result)

Answer 2

const a = [
{group: 'abc', data: [{name: 'John', age: 10}, {name: 'Alice', age: 15}]},
{group: 'def', data: [{name: 'Scott', age: 20}, {name: 'Tamar', age: 25}]}
];
const flat = a.flatMap(({group, data}) => data.map(o => Object.assign({group}, o)));
console.log(flat)
// Unmodified original Array:
console.log(a)

• MDN Array.prototype.flatMap((
• MDN Array.prototype.map((
• MDN对象.assign((

Answer 3

Array#reduce会有所帮助。

const a = [{group:'abc',data:[{name:'John',age:10},{name:'Alice',age:15}]},{group:'def',data:[{name:'Scott',age:20},{name:'Tamar',age:25}]}];
const r = a.reduce((s, { group, data }) =>
(data.forEach((o) => s.push({ ...o, group })), s), []);
console.log(r);