复杂分组:数组归约

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; }

​