递归访问对象中对象的键/值对，并将它们组合成一个平面数组

Question

我有一个包含我所有路由的对象数组。我需要访问所有对象的嵌套子属性及其属性，并将它们组合在一起。

我的对象数组如下所示：

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

我需要将对象数组变成单级数组平面，如下所示：

[
{
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
]

我试图.map().filter()与while循环相结合，但说实话，我缺乏自己完成的技能，不值得包括我的尝试。如果有人能帮助我解决这个问题并解释一下，将不胜感激。

Answer 1

我尝试编辑您的代码示例，以便它们有意义并且运行没有错误。这是一个递归函数，在根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;
};

Answer 2

这是一个非常简单的 ES6 函数。 它可能不是可用的性能最高的版本，但它很简单。

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))

请注意，这使用深度优先排序;我猜广度优先的代码会更丑陋，但我还没有尝试过。