数组元素可以以混乱的顺序排列

let array = [ { id: 1, data: 'something', parent_id: null, children: [] }, { id: 2, data: 'something', parent_id: 1, children: [] }, { id: 5, data: 'something', parent_id: 4, children: [] }, { id: 4, data: 'something', parent_id: 3, children: [] }, { id: 3, data: 'something', parent_id: null, children: [] }, { id: 6, data: 'something', parent_id: null, children: [] } ] function buildTree(array) { let tree = [] for (let i = 0; i < array.length; i++) { if (array[i].parent_id) { let parent = array.filter(elem => elem.id === array[i].parent_id).pop() parent.children.push(array[i]) } else { tree.push(array[i]) } } return tree } const tree = buildTree(array) console.log(tree); .as-console-wrapper { min-height: 100% }

我有类似的问题，几天前必须从平面数组显示文件夹树。我在TypeScript中没有看到任何解决方案，所以我希望它会有帮助。

在我的情况下，主父只有一个，rawData数组也不需要排序。解决方案基于准备临时对象 {parentId: [child1, child2，…]]}

示例原始数据

const flatData: any[] = Folder.ofCollection([
  {id: '1', title: 'some title' },
  {id: '2', title: 'some title', parentId: 1 },
  {id: '3', title: 'some title', parentId: 7 },
  {id: '4', title: 'some title', parentId: 1 },
  {id: '5', title: 'some title', parentId: 2 },
  {id: '6', title: 'some title', parentId: 5 },
  {id: '7', title: 'some title', parentId: 5 },

]);

文件夹的定义

export default class Folder {
    public static of(data: any): Folder {
        return new Folder(data);
    }

    public static ofCollection(objects: any[] = []): Folder[] {
        return objects.map((obj) => new Folder(obj));
    }

    public id: string;
    public parentId: string | null;
    public title: string;
    public children: Folder[];

    constructor(data: any = {}) {
        this.id = data.id;
        this.parentId = data.parentId || null;
        this.title = data.title;
        this.children = data.children || [];
    }
}

解决方案:返回扁平参数的树结构的函数

    public getTree(flatData: any[]): Folder[] {
        const addChildren = (item: Folder) => {
            item.children = tempChild[item.id] || [];
            if (item.children.length) {
                item.children.forEach((child: Folder) => {
                    addChildren(child);
                });
            }
        };

        const tempChild: any = {};
        flatData.forEach((item: Folder) => {
            const parentId = item.parentId || 0;
            Array.isArray(tempChild[parentId]) ? tempChild[parentId].push(item) : (tempChild[parentId] = [item]);
        });

        const tree: Folder[] = tempChild[0];
        tree.forEach((base: Folder) => {
            addChildren(base);
        });
        return tree;
    }

我的解决方案:

允许双向映射(根到叶，叶到根) 返回所有节点、根节点和叶节点 一次数据传递和非常快的性能 香草Javascript

/**
 * 
 * @param data items array
 * @param idKey item's id key (e.g., item.id)
 * @param parentIdKey item's key that points to parent (e.g., item.parentId)
 * @param noParentValue item's parent value when root (e.g., item.parentId === noParentValue => item is root)
 * @param bidirectional should parent reference be added
 */
function flatToTree(data, idKey, parentIdKey, noParentValue = null, bidirectional = true) {
  const nodes = {}, roots = {}, leaves = {};

  // iterate over all data items
  for (const i of data) {

    // add item as a node and possibly as a leaf
    if (nodes[i[idKey]]) { // already seen this item when child was found first
      // add all of the item's data and found children
      nodes[i[idKey]] = Object.assign(nodes[i[idKey]], i);
    } else { // never seen this item
      // add to the nodes map
      nodes[i[idKey]] = Object.assign({ $children: []}, i);
      // assume it's a leaf for now
      leaves[i[idKey]] = nodes[i[idKey]];
    }

    // put the item as a child in parent item and possibly as a root
    if (i[parentIdKey] !== noParentValue) { // item has a parent
      if (nodes[i[parentIdKey]]) { // parent already exist as a node
        // add as a child
        (nodes[i[parentIdKey]].$children || []).push( nodes[i[idKey]] );
      } else { // parent wasn't seen yet
        // add a "dummy" parent to the nodes map and put the item as its child
        nodes[i[parentIdKey]] = { $children: [ nodes[i[idKey]] ] };
      }
      if (bidirectional) {
        // link to the parent
        nodes[i[idKey]].$parent = nodes[i[parentIdKey]];
      }
      // item is definitely not a leaf
      delete leaves[i[parentIdKey]];
    } else { // this is a root item
      roots[i[idKey]] = nodes[i[idKey]];
    }
  }
  return {roots, nodes, leaves};
}

使用的例子:

const data = [{id: 2, parentId: 0}, {id: 1, parentId: 2} /*, ... */];
const { nodes, roots, leaves } = flatToTree(data, 'id', 'parentId', 0);

你可以用两行代码来解决这个问题:

_(flatArray).forEach(f=>
           {f.nodes=_(flatArray).filter(g=>g.parentId==f.id).value();});

var resultArray=_(flatArray).filter(f=>f.parentId==null).value();

在线测试(查看浏览器控制台以获得创建的树)

要求:

1-安装lodash 4(一个Javascript库，用于操作对象和集合，使用性能方法=>，就像c#中的Linq)

2-如下所示的flatArray:

    var flatArray=
    [{
      id:1,parentId:null,text:"parent1",nodes:[]
    }
   ,{
      id:2,parentId:null,text:"parent2",nodes:[]
    }
    ,
    {
      id:3,parentId:1,text:"childId3Parent1",nodes:[]
    }
    ,
    {
      id:4,parentId:1,text:"childId4Parent1",nodes:[]
    }
    ,
    {
      id:5,parentId:2,text:"childId5Parent2",nodes:[]
    }
    ,
    {
      id:6,parentId:2,text:"childId6Parent2",nodes:[]
    }
    ,
    {
      id:7,parentId:3,text:"childId7Parent3",nodes:[]
    }
    ,
    {
      id:8,parentId:5,text:"childId8Parent5",nodes:[]
    }];

谢谢Bakhshabadi先生

祝你好运

数组元素可以以混乱的顺序排列

let array = [ { id: 1, data: 'something', parent_id: null, children: [] }, { id: 2, data: 'something', parent_id: 1, children: [] }, { id: 5, data: 'something', parent_id: 4, children: [] }, { id: 4, data: 'something', parent_id: 3, children: [] }, { id: 3, data: 'something', parent_id: null, children: [] }, { id: 6, data: 'something', parent_id: null, children: [] } ] function buildTree(array) { let tree = [] for (let i = 0; i < array.length; i++) { if (array[i].parent_id) { let parent = array.filter(elem => elem.id === array[i].parent_id).pop() parent.children.push(array[i]) } else { tree.push(array[i]) } } return tree } const tree = buildTree(array) console.log(tree); .as-console-wrapper { min-height: 100% }

以防有家长需要。参考id 2，它有多个父元素

const dataSet = [{ "ID": 1, "Phone": "(403) 125-2552", "City": "Coevorden", "Name": "Grady" }, {"ID": 2, "Phone": "(403) 125-2552", "City": "Coevorden", "Name": "Grady" }, { "ID": 3, "parentID": [1,2], "Phone": "(979) 486-1932", "City": "Chełm", "Name": "Scarlet" }]; const expectedDataTree = [ { "ID":1, "Phone":"(403) 125-2552", "City":"Coevorden", "Name":"Grady", "childNodes":[{ "ID":2, "parentID":[1,3], "Phone":"(979) 486-1932", "City":"Chełm", "Name":"Scarlet", "childNodes":[] }] }, { "ID":3, "parentID":[], "Phone":"(403) 125-2552", "City":"Coevorden", "Name":"Grady", "childNodes":[ { "ID":2, "parentID":[1,3], "Phone":"(979) 486-1932", "City":"Chełm", "Name":"Scarlet", "childNodes":[] } ] } ]; const createDataTree = dataset => { const hashTable = Object.create(null); dataset.forEach(aData => hashTable[aData.ID] = {...aData, childNodes: []}); const dataTree = []; dataset.forEach(Datae => { if (Datae.parentID && Datae.parentID.length > 0) { Datae.parentID.forEach( aData => { hashTable[aData].childNodes.push(hashTable[Datae.ID]) }); } else{ dataTree.push(hashTable[Datae.ID]) } }); return dataTree; }; window.alert(JSON.stringify(createDataTree(dataSet)));