[英]Recursively accessing key/value pairs of object within objects & combining them together into a flat array
I have an array of objects that contains all my routes.我有一个包含我所有路线的对象数组。 I need to access all object's nested children properties & their properties and combining the together.我需要访问所有对象的嵌套子属性及其属性并将它们组合在一起。
My array of object looks similar to this:我的对象数组看起来类似于:
const routes = [
{
path: '/system-settings1',
name: 'global-settings1',
component: 'tabs1',
children: [
{
path: 'level2-accounting1',
name: 'local-settings1',
components: 'modals1',
children: [
{
path: 'level3-accounting1',
name: 'local-settings1',
components: 'modals1'
}
// more children deeply nested(or not)
]
},
{
path: 'level2-accounting1',
name: 'local-settings1',
components: 'modals1',
children: [
{
path: 'level3-accounting1',
name: 'local-settings1',
components: 'modals1'
}
// more children deeply nested(or not)
]
}
],
},
{
path: '/system-settings2',
name: 'global-settings2',
component: 'tabs2',
children: [
{
path: 'level2-accounting2',
name: 'local-settings2',
components: 'modals2',
children: [
{
path: 'level3-accounting2',
name: 'local-settings2',
components: 'modals2'
}
// more children deeply nested(or not)
]
},
{
path: 'level3-accounting2',
name: 'local-settings2',
components: 'modals2',
children: [
{
path: 'level4-accounting2',
name: 'local-settings2',
components: 'modals2'
}
// more children deeply nested(or not)
],
}
],
},
// more objects with similar key/value pairs
];
I need to make the array of objects into single level array flat like so:我需要将对象数组变成单级数组,如下所示:
[
{
path: '/system-settings1',
name: 'global-settings1',
component: 'tabs1',
},
{
path: 'level2-accounting2',
name: 'local-settings2',
components: 'modals2',
},
{
path: 'level3-accounting1',
name: 'local-settings1',
components: 'modals1'
},
{
path: 'level2-accounting1',
name: 'local-settings1',
components: 'modals1',
}
// so on if there is more objects etc
]
I have tried to .map()
& .filter()
combine with a while
loop, but to be honest I'm lacking the skills to accomplish by my own & it's not worth to include my attempts.我曾尝试将.map()
和.filter()
与while
循环结合起来,但说实话,我缺乏自己完成的技能,不值得包括我的尝试。 If anybody could assist me with this & explain it would be extremely appreciated.如果有人能帮我解决这个问题并解释一下,我将不胜感激。
I tried to edit your code examples so that they made sense and ran without errors.我试图编辑您的代码示例,使它们有意义并且运行时没有错误。 This is a recursive function that gets called on the root routes
array, as well as any nested children
arrays:这是一个递归函数,在根routes
数组以及任何嵌套的children
数组上调用:
const flatten = routes => {
const flattened = [];
for (let i = 0; i < routes.length; i++) {
const route = routes[i];
//for each route, grab only the information about the route itself (no children)
const { path, name, components } = route;
const flatRoute = { path, name, components };
//add the new route object to our return array
flattened.push(flatRoute);
//if the route had children, recursively call flatten on them
//and add each child to our return array
if (route.children) {
const flatChildren = flatten(route.children);
flattened.push(...flatChildren);
}
}
return flattened;
};
Here's a pretty straightforward ES6 function.这是一个非常简单的 ES6 函数。 It is perhaps not the most performant version available, but it's simple.它可能不是可用的最高性能版本,但它很简单。
const flattenAll = (xs) => xs .reduce ( (all, {children, ...rest}) => [...all, {...rest}, ...flattenAll(children || [])], [] ) const routes = [{path: "/system-settings1", name: "global-settings1", component: "tabs1", children: [{path: "level2-accounting1", name: "local-settings1", components: "modals1", children: [{path: "level3-accounting1", name: "local-settings1", components: "modals1"}]}, {path: "level2-accounting1", name: "local-settings1", components: "modals1", children: [{path: "level3-accounting1", name: "local-settings1", components: "modals1"}]}]}, {path: "/system-settings2", name: "global-settings2", component: "tabs2", children: [{path: "level2-accounting2", name: "local-settings2", components: "modals2", children: [{path: "level3-accounting2", name: "local-settings2", components: "modals2"}]}, {path: "level3-accounting2", name: "local-settings2", components: "modals2", children: [{path: "level4-accounting2", name: "local-settings2", components: "modals2"}]}]}]; console .log (flattenAll (routes))
Note that this uses a depth-first ordering;请注意,这使用深度优先排序; I'm guessing that a breadth-first one would be significantly uglier code, but I haven't tried it.我猜广度优先的代码会非常丑陋,但我还没有尝试过。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.