如何从另一个对象数组填充一个对象数组并创建一个新的对象数组?

Question

有两个对象数组。其中一个包含一些随机菜单。第二个包含了第一个数组元素的id它指明了第一个数组的哪个元素是头菜单哪个是子菜单。假设Id 1 Home将是头部菜单。id 2,3(首页1，首页2)将是子菜单。

我必须通过id填充这些元素，并且必须从这些数组中创建第三个对象数组，以便我可以轻松地在react组件中动态呈现它们。

我该怎么做呢?

我还不知道该怎么开始。

const menus = [
{
id: 1,
text: 'Home',
link: '#'
},
{
id: 2,
text: 'Home page 1',
link: '#'
},
{
id: 3,
text: 'Home page 2',
link: '#'
},
{
id: 4,
text: 'Shop',
link: '#'
},
{
id: 5,
text: 'two column',
link: '#'
},
{
id: 6,
text: 'single column',
link: '#'
},
]
const childrenMap = [
{
parent: 1,
chilren: [2, 3]
},
{
parent: 4,
children: [5, 6]
}
]

Answer 1

使用reduce构建一个新的数组。使用find查找匹配的id。

const menus = [
{
id: 1,
text: 'Home',
link: '#'
},
{
id: 2,
text: 'Home page 1',
link: '#'
},
{
id: 3,
text: 'Home page 2',
link: '#'
},
{
id: 4,
text: 'Shop',
link: '#'
},
{
id: 5,
text: 'two column',
link: '#'
},
{
id: 6,
text: 'single column',
link: '#'
},
]
const childrenMap = [
{
parent: 1,
children: [2, 3]
},
{
parent: 4,
children: [5, 6]
}
]
const result = childrenMap.reduce((p, c) =>
p.concat({ parent: menus.find(m => m.id === c.parent), children: c.children.map(cc => menus.find(m => m.id === cc)) }), []
);
console.log(result);