如何在数组对象中创建嵌套树

Question

跟随数组对象数据： 使用 Javascript 数据结构，每次当我使用其 ID 和父 ID 获取新子对象时，我如何将数组对象迭代到子数组中。

尝试使用 javascript 查找父 ID 和子嵌套根节点，但我无法找到如何将数组对象迭代到其子数组中。谁能帮帮我。

var data = [ 
  { id: 7, label: 'a', parentId: 2, childerns: [] },
  { id: 7, label: 'm', parentId: 2, childerns: [] },
  { id: 2, label: 'b', parentId: 5, childerns: [] },
  { id: 5, label: 'c', parentId: 20, childerns: [] },
  { id: 20, label: 'x', parentId: null, childerns: [] },
  { id: 8, label: 'd', parentId: 7, childerns: [] },
  { id: 9, label: 'n', parentId: 8, childerns: [] },
  { id: 9, label: 'n', parentId: 8, childerns: [] } ];```

and looking for the following nested tree pattern:

```var data = [
    {
        id: 20,
        label: 'x',
        parentId: null,
        childerns: [
            {
                id: 5,
                label: 'c',
                parentId: 20,
                childerns: [{
                    id: 2,
                    label: 'b',
                    parentId: 5,
                    childerns: [
                        {
                            id: 7, 
                            label: 'm',
                            parentId: 2,
                            childerns: [] 
                        },
                        {
                            id: 7,
                            label: 'a',
                            parentId: 2,
                            childerns: [{
                                id: 8,
                                label: 'd',
                                parentId: 7,
                                childerns: [
                                    {
                                        id: 9,
                                        label: 'n',
                                        parentId: 8,
                                        childerns: []
                                    },
                                    {
                                        id: 9,
                                        label: 'n',
                                        parentId: 8,
                                        childerns: []
                                    }
                                ]
                            }]
                        }]
                }]
            }]
    }];```

Answer 1

我喜欢下面的模式。首先，您使用一个对象来跟踪每个元素在原始数组中的位置。然后，遍历原始数组，将当前元素的引用添加到其父数组。如果parentId 为空，则将该元素添加到roots。毕竟，您的 roots 数组将包含完整的树。

const arr = [
  { id: 7, label: 'm', parentId: 2, childerns: [] },
  { id: 2, label: 'b', parentId: 5, childerns: [] },
  { id: 5, label: 'c', parentId: 20, childerns: [] },
  { id: 20, label: 'x', parentId: null, childerns: [] },
  { id: 8, label: 'd', parentId: 7, childerns: [] },
  { id: 9, label: 'n', parentId: 8, childerns: [] },
  { id: 10, label: 'n', parentId: 8, childerns: [] } 
];

// Map element ID to arr index
const arrMap = arr.reduce((acc, el, i) => {
  acc[el.id] = i;
  return acc;
}, {});

const roots = [];

// Push each element to parent's children array
arr.forEach(el => {
  if (el.parentId === null) {
    roots.push(el);
  } else {
    arr[arrMap[el.parentId]].childerns.push(el);
  }
});

console.log(roots);

Answer 2

如果您正在寻找子级几乎可以无限扩展的模式，您应该使用类或构造函数，这样您就可以在其中传递另一个实例，如下面的UnitInstance.addChild 方法所示。

 /* constructor */
function Unit(id, label, children){
  this.id = id; this.label = label; this.parentId = null; this.children = [];
  var t = this;
  this.addChild = function(unitInstance){
    unitInstance.parentId = this.id; this.children.push(unitInstance);
    return this;
  }
  if(children){
    children.forEach(function(o){
      t.addChild(o);
    });
  }
  this.getData = function(){
    var c = [];
    this.children.forEach(function(o){
      c.push(o.getData());
    });
    return {id:t.id, label:t.label, parentId:t.parentId, children:c};
  }
}
var x = new Unit(20, 'x'), c = new Unit(5, 'c'), b = new Unit(2, 'b'), m = new Unit(7, 'm'); a = new Unit(7, 'a'), d = new Unit(8, 'd'), n = new Unit(9, 'n');
x.addChild(c.addChild(b.addChild(m.addChild(a.addChild(d.addChild(n).addChild(n))))));
var data = [x.getData()];
console.log(data);