如何通过提取 Javascript/Typescript 中另一个对象数组中的数组来创建对象数组？

Question

我正在尝试基于另一个对象数组创建一个新数组，该对象数组的键中有另一个对象数组。 解释我自己。 我有以下接口：

export interface  RouteElement{
  component?:  Type<any>;
  path: string;
  label: string;
  data?:{ message?: string}

}

export interface  RouterNodeElement{
  label: string;
  children: RouteElement[]
}

我有这个数组

routerNodes: [ { label: "NodeRoute", children: [ { path: 'child', label: 'child',  data: { message: 'child' }}] } ]

所以基本上我有一个 routerNodes 数组，其中包含“Children”中的键，我想要的是提取所有“Children”并为每个 routerNodel 的每个孩子创建一个新数组，但我找不到扁平化该对象的方法.

const flatRouterNodes = this.routerNodes.map( route => {
    return route.children.map( child => child);
  });

我得到了什么

Answer 1

这是你要找的吗？

const routeNodes = [ { label: "NodeRoute", children: [ { path: 'child', label: 'child',  data: { message: 'child' }}] }, { label: "R2", children: [ { path: 'child', label: 'child',  data: { message: 'child' }}] } ]
routeNodes.reduce((acc, curr) => [...acc, ...curr.children], [])
// [
//  { path: 'child', label: 'child', data: { message: 'child' } },
//  { path: 'child', label: 'child', data: { message: 'child' } }
// ]

您还可以使用flatMap ：

routerNodes.flatMap((item) => item.children)

请注意， flatMap在 IE 11 中不起作用，但似乎比reduce性能更高（ 请参阅 benchmark ）。

Answer 2

您可以使用reduce和forEach

 let routerNodes = [ { label: "NodeRoute", children: [ { path: 'child', label: 'child', data: { message: 'child' }}] } ] let childerns = routerNodes.reduce((acc,curr)=>{ curr.children.forEach(child => acc.push(child)) return acc },[]) console.log(childerns)

---

 let routerNodes = [{label: "NodeRoute",children: [{path: 'child',label: 'child',data: {message: 'child'}}]},{label: "NodeRoute2",children: [{path: 'child2',label: 'child2',data: {message: 'child2'}}]}] let childerns = routerNodes.flatMap(curr => curr.children) console.log(childerns)

您也可以使用 flatMap