根据JavaScript中的路径和元素数组构建自定义对象

Question

基本上，我要给定对象数组以构建新结构。对象有效负载看起来像下面的元素数组。

const data = [
{
  path: [],
  elements: ['Parent A']
},
{
  path: ['Parent A'],
  elements: ['Child A1', 'Child A2', 'Parent B']
},
{
  path: ['Parent A', 'Parent B'],
  elements: ['Child B1', 'Parent C']
},
{
  path: ['Parent A', 'Parent B', 'Parent C'],
  elements: ['Child C1']
},
{
  path: ['Parent D'],
  elements: ['Child D1']
},
]

然后上述有效负载将转换为如下所示的自定义对象。

let newObject =
[
 {
  elem: "",
  children: [
   {
    elem: "Parent A",
    children: [
     {
      elem: "Child A1",
      children: []
     },
     {
      elem: "Child A2",
      children: []
     },
     {
      elem: "Parent B",
      children: [
      {
       elem: "Child B1",
       children: []
      },
      {
       elem: "Parent C",
       children: [
       {
        elem: "Child C1",
        children: []
       }
       ]
      },
      ]
     },
    ]
   }
  ]
 },
 {
  elem: "Parent D",
  children: [
   {
    elem: "Child D1",
    children: []
   }
  ]
 }
]

我考虑过制作一个地图，在该地图中，我给每个元素都提供了一个已访问的属性（以避免重新创建元素），并采取了递归方法来填充潜在的父对象。但是，我目前很困惑，希望获得有关我应该使用哪种数据结构/方法的反馈。

我的映射器代码

const stringifyPath = (arr) => {
    return arr.join('>');
}

let elemMap = new Map();

data.forEach(item => {
    const itemPath = stringifyPath(item.path);
    if (!elemMap.get(itemPath)) {
        elemMap.set(itemPath, {
            elements: [],
            visited: false
        })
    }
    elemMap.get(itemPath).elements = [...elemMap.get(itemPath).elements, ...item.elements];
});

此产量

{
  '' => { elements: [ 'Parent A' ], visited: false },
  'Parent A' => { elements: [ 'Child A1', 'Child A2', 'Parent B' ],
    visited: false },
  'Parent A>Parent B' => { elements: [ 'Child B1', 'Parent C' ], visited: false },
  'Parent A>Parent B>Parent C' => { elements: [ 'Child C1' ], visited: false },
  'Parent D' => { elements: [ 'Child D1' ], visited: false } }

感谢任何反馈，谢谢！

Answer 1

您可以通过为每个嵌套层级找到对象来减少路径，并将新元素推送到找到的对象的子代中，来实现直截了当的方法。

var data = [{ path: [], elements: ['Parent A'] }, { path: ['Parent A'], elements: ['Child A1', 'Child A2', 'Parent B'] }, { path: ['Parent A', 'Parent B'], elements: ['Child B1', 'Parent C'] }, { path: ['Parent A', 'Parent B', 'Parent C'], elements: ['Child C1'] }, { path: ['Parent D'], elements: ['Child D1'] }],
    result = data.reduce((r, { path, elements }) => {
        path
            .reduce((array, elem) => {
                var temp = array.find(q => q.elem === elem);
                if (!temp) array.push(temp = { elem, children: [] });
                return temp.children;
            }, r)
            .push(...elements.map(elem => ({ elem, children: [] })));
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }