展平路线树

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 被重写为它们的“新”值，例如路由“电子邮件”应该有它的 @987654333 @ 阅读：dashboard.settings.email，它是 path 重写为：/dashboard/settings/email 所以对每个对象进行变异，并保持不变的属性（但仍将其保持为平面数组，因此没有嵌套的子数组）。

更新 3：

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

我想把整棵树弄平，所以一切都在同一水平上，但所有孩子都应该根据他们在树的深度来重写他们的“名字”和“路径”。示例：

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