我如何通过他们的 parentId 和 Id 从 Javascript 中的这个平面数组构建一个树数组。

Question

我有一个这样的平面数组，我应该为它构建一个平面数组。如果 pid 不为 null，则该对象将是其父对象的子属性。我该怎么做？

    var a = [
        {id: 1, pid: null}, 
        {id: 2, pid: 1}, 
        {id: 3, pid: 1}, 
        {id: 4, pid: 3}, 
        {id: 5, pid: 3}
     ];

期望输出：

     var result = [{id: 1, children: [
        {id: 2, children: []},
        {id: 3, children: [{id: 4}, {id: 5}]}
    ]}]

Answer 1

您可以使用单循环方法，该方法也适用于未排序的数组。

var a = [{ id: 1, pid: null }, { id: 2, pid: 1 }, { id: 3, pid: 1 }, { id: 4, pid: 3 }, { id: 5, pid: 3 }],
    tree = function (data, root) {
        return data.reduce(function (o, { id, pid }) {
            o[id] = o[id] || { id };
            o[pid] = o[pid] || { id: pid };
            o[pid].children = o[pid].children || [];
            o[pid].children.push(o[id]);
            return o;
        }, {})[root].children;
    }(a, null);

console.log(tree);

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

Answer 2

您可以使用reduce() 方法并创建递归函数。

var a = [{id: 1, pid: null}, {id: 2, pid: 1}, {id: 3, pid: 1}, {id: 4, pid: 3}, {id: 5, pid: 3}];

function tree(data, parent) {
  return data.reduce((r, {id,pid}) => {
    if (parent == pid) {
      const obj = {id}
      const children = tree(data, id);
      if (children.length) obj.children = children;
      r.push(obj)
    }
    return r;
  }, [])
}

const result = tree(a, null);
console.log(result);

Answer 3

这里使用 reduce 的两个答案都很好，一个小问题是两者都有多遍，IOW：如果树很大，就会有很多线性搜索。

对此的一种解决方案是先构建地图，然后将地图展平.. 嗯，实际上展平在这里可能是错误的词，也许是展开.. :) 但你明白了..

下面是一个例子。

const a = [
    {id: 1, pid: null}, 
    {id: 2, pid: 1}, 
    {id: 3, pid: 1}, 
    {id: 4, pid: 3}, 
    {id: 5, pid: 3}
 ];
 
 
function flatern(map, parent) {
  const g = map.get(parent);
  const ret = [];
  if (g) {
    for (const id of g) {
      const k = {id};
      ret.push(k);
      const sub = flatern(map, id);
      if (sub) k.children = sub;
    }
    return ret;
  }
  return null;
}
     
function tree(a) {
  const m = new Map();
  a.forEach((i) => {
    const g = m.get(i.pid);
    if (!g) {
      m.set(i.pid, [i.id]);
    } else {
      g.push(i.id);
    }
  });
  return flatern(m, null);
}

console.log(tree(a));

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

Answer 4

    var a = [
        {id: 1, pid: null}, 
        {id: 2, pid: 1}, 
        {id: 3, pid: 1}, 
        {id: 4, pid: 3}, 
        {id: 5, pid: 3}
    ];

    function processToTree(data) {
        const map = {};
        data.forEach(item => {
            map[item.id] = item;
            item.children = [];
        });

        const roots = [];
        data.forEach(item => {
            const parent = map[item.pid];
            if (parent) {
                parent.children.push(item);
            }
            else {
                roots.push(item);
            }
        });
        return roots;
    }

今天学习了这个方法，我觉得这个最好了