javascript - 在 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: []
   }
  ]
 }
]

我考虑过制作一个 map ，在其中为每个元素提供一个已访问的属性(以避免重新创建元素)，并采用递归方法来填充潜在的父元素。然而，我目前陷入困境，正在寻找有关我应该使用哪种数据结构/方法的反馈。

我的映射器代码

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