Javascript 展平路由树

我正试图找到一种方法，用routes（vanilla js）和子routes展平一个数组，这样我就可以得到一个数组，其中的对象处于相同的级别，但它们的

名称
和
路径
属性基于它们的“级别”

例如，我希望
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);
        }

    }
}

谢谢
您可以通过将最后一个
名称
和
路径
交给嵌套对象来采用迭代和递归的方法


函数getFlat（数组，n=''，p=''）{
返回数组.reduce（（r，{children=[]，…o}）=>{
变量名称=n+（n&&“.”）+o.name，
路径=p+o路径；
返回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:'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'}]}]}，
平坦=平坦（路线）；
console.log（平面）；
。作为控制台包装{max height:100%！important；top:0；}
请在问题中包含所有相关信息，而不是链接到其他网站。下面是您的整个问题（包括任何必要的代码）必须在你的问题中，而不仅仅是链接。两个原因：人们不应该离开网站来帮助你；链接腐烂，使问题及其答案在将来对人们毫无用处。请将所有相关代码等（理想情况下是an）放在问题中。更多信息：好的，请查看我的更新答案。仅供参考，您可以使用堆栈片段（the
[]
工具栏按钮）用于可运行示例..顺便说一句，模板和列表之间存在错误。您需要结束最后一个对象和一个新对象，如
}，{
。非常好。但是，不包括项目“dashboard”或“dashboard.settings”的值或者。可能我不够清楚，抱歉。啊，太好了！这看起来真的很好。我该如何重写每个对象？例如，/sender现在应该是/dashboard/settings/email/sender，在其属性上……。（以及name属性，但基于其名称，用点分隔）请将想要的结果添加到问题中。你想变异数据，还是获得新的数组/对象？啊，对不起。这可能是任何一种方式，我想变异在这种情况下都会更好。我已经更新了问题，希望对我想要实现的目标有足够好的解释。尼娜，我注意到你更新了你的答案。我的意思是什么s保留平面结构，因此没有子数组，但应保留所有其他属性，并将名称和路径重写为其层次结构…抱歉。希望您有精力再次查看；）
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
        ...
    },
    .....
]