javascript - 展平路线树

Question

我正在尝试找到一种方法来展平带有路由(vanilla js)和子路由的数组，以便我得到一个包含同一级别对象的数组，但带有它们的 name 和 path 属性基于它们的“级别”。

例如，我希望 name 类似于 dashboard.settings.user...... path 到将通向“有效”路径的路径连接起来。

我一直在尝试使用递归函数，但无法弄清楚如何跟踪级别..

更新:

var routesConfig = [
    {
        name: 'dashboard',
        path: '/dashboard',
        children: [
            {
                name: 'settings',
                path: '/settings',
                children: [
                    {
                        name: 'user',
                        path: '/user'
                    },
                    {
                        name: 'email',
                        path: '/email',
                        children: [
                            {
                                name: 'template',
                                path: '/template',
                                children: [
                                    {
                                        name: 'error',
                                        path: '/error'
                                    },
                                    {
                                        name: 'success',
                                        path: '/success'
                                    }
                                ],
                                name: 'lists',
                                path: '/lists',
                                children: [
                                    {
                                        name: 'signup',
                                        path: '/signup'
                                    },
                                    {
                                        name: 'newsletter',
                                        path: '/newsletter'
                                    }
                                ]
                            },
                            {
                                name: 'sender',
                                path: '/sender'
                            }
                        ]
                    }
                ]
            },
            {
                name: 'contact',
                path: '/contact',
                children: [
                    {
                        name: 'person',
                        path: '/person',
                        children: [
                            {
                                name: 'john',
                                path: '/john'
                            },
                            {
                                name: 'jane',
                                path: '/jane'
                            }
                        ]
                    }
                ]
            }
        ]
    },
]

flattenRoutes();

function flattenRoutes(){
    let routes = [];

    routesConfig.map(route => {
        const {name, path, children} = route;
        routes.push({name, path});

        if(children && children.length){
            iterateRouteChildren(route, routes, 1, []);
        }
    });

    console.log("routes", routes);
}

function iterateRouteChildren(parent, routes, depth, tree){
    for(let i = 0; i < parent.children.length; i++){
        let childRoute = parent.children[i];

        let name = childRoute.name;
        let path = childRoute.path;

        if(depth === 1){
            tree = [];
        }else{
            tree.push(childRoute.name)

        }

        routes.push({name, path, tree: tree.filter(Boolean).join('.')});

        if(childRoute.children && childRoute.children.length){
            iterateRouteChildren(childRoute, routes, depth + 1, tree);
        }

    }
}

更新 2:

基于 Nina 的解决方案，我要求一种方法来保留原始对象/值，但是 name 和 path 被重写为它们的"new"值，因为示例路由“email”应该有它的 name 读取:dashboard.settings.email 并且它的 path 被重写为:/仪表板/设置/电子邮件 所以改变每个对象，并保持不变的属性(但仍将其保持为平面数组，因此没有嵌套的子数组)。

更新 3:

试图澄清。我的嵌套 routesConfig 将包含具有“名称”、“路径”、“其他一些属性”和可能“子项”等属性的对象。

我想把整棵树弄平，所以所有的东西都在同一层上，但是所有的 child 都应该根据他们在树下的深度重写他们的“名字”和“路径”。示例:

let result = [
    {
        name: 'dashboard',
        path: '/dashboard',
        id: 'my-dashboard-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings',
        path: '/dashboard/settings',
        id: 'my-settings-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.user',
        path: '/dashboard/settings/user',
        id: 'my-user-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.email',
        path: '/dashboard/settings/email',
        id: 'my-email-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.email.template',
        path: '/dashboard/settings/email/template',
        id: 'my-template-id',
        someotherprop: someothervalue
        ...
    },
    {
        name: 'dashboard.settings.email.template.error',
        path: '/dashboard/settings/email/template.error',
        id: 'my-error-id',
        someotherprop: someothervalue
        ...
    },
    .....
]

谢谢

Answer 1

您可以通过将最后的 name 和 path 交给嵌套对象来采用迭代和递归的方法。

function getFlat(array, n = '', p = '') {
    return array.reduce((r, { children = [], ...o }) => {
        var name = n + (n && '.') + o.name,
            path = p + o.path;
        return r.concat(Object.assign({}, o, { name, path }), getFlat(children, name, path));
    }, []);
}

var routes = [{ name: 'dashboard', path: '/dashboard', children: [{ name: 'settings', path: '/settings', children: [{ name: 'user', path: '/user' }, { name: 'email', path: '/email', children: [{ name: 'template', path: '/template', children: [{ name: 'error', path: '/error' }, { name: 'success', path: '/success' }] }, { name: 'lists', path: '/lists', children: [{ name: 'signup', path: '/signup' }, { name: 'newsletter', path: '/newsletter' }] }, { name: 'sender', path: '/sender' }] }] }, { name: 'contact', path: '/contact', children: [{ name: 'person', path: '/person', children: [{ name: 'john', path: '/john' }, { name: 'jane', path: '/jane' }] }] }] }],
    flat = getFlat(routes);

console.log(flat);

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