数组转换成树形结构

Question

我有一个需要转换成树形结构的数组，并且我已经搜索了一些场景，比如下面的代码，但是一旦数据量太大，生成这个树形结构所需的时间似乎太长了，请问是否可以有更好的解决方案或优化！

var data = [{ id: 1, name: 'A', parentId: 0 },{ id: 2, name: 'B', parentId: 1 },{ id: 3, name: 'C', parentId: 2 },{ id: 4, name: 'D', parentId: 3 },{ id: 5, name: 'E', parentId: 4 },{ id: 6, name: 'F', parentId: 5 },{ id: 7, name: 'G', parentId: 6 },{ id: 8, name: 'H', parentId: 7 },{ id: 9, name: 'Z', parentId: 8 }];

var toTree = function(data) {
  var map = {};
  data.forEach(function(item) {
    map[item.id] = item;
  });
  var val = [];
  data.forEach(function(item) {
    var parent = map[item.parentId];
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      val.push(item);
    }
  });
  return val;
}
console.log(toTree(data))

- hywel

---

你的数组中有多少项？“太长”的意思是什么：是导致浏览器挂起，还是只是超出了你的个人喜好？ - ben

Answer 1

一种方法是首先更改您的数据，使其不是来自数组而是树形结构映射和数据映射：

var treeStructure = {
   'ROOT': ['childId1', 'childId2'],
   'childId1': ['childId3']
}
var data = {
   'childId1': {
      'property1':1 
   },
   'childId2': {
      'property1':2
   },
   'childId3': {
      'property1': 3
   }
}

这样做是为了使父子关系非常清晰，每个项目都很容易找到。

- jmarioste

Answer 2

你可以使用单循环方法，在同一个循环中使用id和parentId来构建一棵树。

最后返回根节点的子节点。

var data = [{ id: 1, name: 'A', parentId: 0 }, { id: 2, name: 'B', parentId: 1 }, { id: 3, name: 'C', parentId: 2 }, { id: 4, name: 'D', parentId: 3 }, { id: 5, name: 'E', parentId: 4 }, { id: 6, name: 'F', parentId: 5 }, { id: 7, name: 'G', parentId: 6 }, { id: 8, name: 'H', parentId: 7 }, { id: 9, name: 'Z', parentId: 8 }],
    tree = function (data, root) {
        var o = {};

        data.forEach(function (a) {
            a.children = o[a.id] && o[a.id].children;
            o[a.id] = a;
            o[a.parentId] = o[a.parentId] || {};
            o[a.parentId].children = o[a.parentId].children || [];
            o[a.parentId].children.push(a);
        });
        return o[root].children;
    }(data, 0);

console.log(tree);

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

- Nina Scholz