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

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

2 个答案: