復雜分組：數組減少

Question

我真的很糾結於 array.reduce()，我想在這種情況下我不確定我是否有正確的方法。 通常我有一個起始數組，我知道我最終需要得到什么，但我似乎無法正確分組。

這是起始數組

[
{ name: 'Home' },
{
    name: 'Services',
    menu: [
    { name: 'Painting' },
    { name: 'Decorating' },
    { name: 'Lawn mowing', submenu: 'Garden' },
    { name: 'Tree surgery', submenu: 'Garden' },
    { name: 'Edging', submenu: 'Garden' }
    ]
},
{ name: 'Contact' }
]

我想結束的是這個

[
{ name: 'Home' },
{
    name: 'Services',
    menu: [
    { name: 'Painting' },
    { name: 'Decorating' },
    {
        name: 'Garden',
        menu: [
        { name: 'Lawn mowing', submenu: 'Garden' },
        { name: 'Tree surgery', submenu: 'Garden' },
        { name: 'Edging', submenu: 'Garden' }
        ]
    }
    ]
},
{ name: 'Contact' }
]

所以我希望能夠按任何具有子菜單的內容進行分組，然后返回一個新的排序數組。

Answer 1

嘗試以下遞歸方法：

 function reduce(array) { const result = []; // object to keep grouped submenus const grouped = {}; for (let i of array) { if (i.menu) { // if the current item has a nested menu we call reduce recursively result.push({ name: i.name, menu: reduce(i.menu) }); } else if (i.submenu) { // if it has a submenu we put it to the grouped object if (grouped[i.submenu]) { grouped[i.submenu].menu.push(i) } else { grouped[i.submenu] = { name: i.submenu, menu: [i] }; result.push(grouped[i.submenu]); } } else { // else we just copy it to the result array result.push(i); } } return result; } const array = [ { name: 'Home' }, { name: 'Services', menu: [ { name: 'Painting' }, { name: 'Decorating' }, { name: 'Lawn mowing', submenu: 'Garden' }, { name: 'Tree surgery', submenu: 'Garden' }, { name: 'Edging', submenu: 'Garden' } ] }, { name: 'Contact' } ]; console.log(reduce(array));

Answer 2

您可以通過查找子菜單來減少數組，並將其用於實際級別中的節點的搜索。

如果不只是添加一個新對象或一個帶有遞歸調用菜單的對象。

 function mapSubmenu(result, { name, menu, submenu }) { if (submenu) { var parent = result.find(({ name }) => name === submenu); if (!parent) result.push(parent = { name: submenu, menu: [] }); parent.menu.push({ name, submenu }); } else { result.push(menu ? { name, menu: menu.reduce(mapSubmenu, []) } : { name } ); } return result; } var data = [{ name: 'Home' }, { name: 'Services', menu: [{ name: 'Painting' }, { name: 'Decorating' }, { name: 'Lawn mowing', submenu: 'Garden' }, { name: 'Tree surgery', submenu: 'Garden' }, { name: 'Edging', submenu: 'Garden' }] }, { name: 'Contact' }], result = data.reduce(mapSubmenu, []); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }