5

初始化数据

var data = [
    { parentId: 0, id: 1, value: '1' },
    { parentId: 3, id: 2, value: '2' },
    { parentId: 0, id: 3, value: '3' },
    { parentId: 1, id: 4, value: '4' },
    { parentId: 1, id: 5, value: '5' }
]

输出结果

[
  {
    id:1,
    value:'1',
    children:[
      {id:4,value:'4',children:[]},
      {id:5,value:'5',children:[]}
    ]
  },{
    id:3,
    value:'3',
    children:[
      {id:2,value:'2',children:[]}
    ]
  }
]

转换函数

function convertArrayToTree(arr){
  let 
    idsMap = {}, 
    result = [],
    node,
    parentNode,
    item, 
    j,
    leng = arr.length;
  for(j = 0; j <= leng; j++ ){
    
    item = arr[j];
    if(!idsMap['$'+ item.id]){
      node = {id: item.id, children: []}
      idsMap['$'+ item.id] = node;
    }else{
       node = idsMap['$'+ item.id]; 
    }
    node.value = item.value;
    
    if(item.parentId === 0){
       result.push(node);
    }else{
      if(!idsMap['$'+ item.parentId]){
        parentNode = {id: item.parentId, children: []}
        idsMap['$'+ item.parentId] = parentNode;
      }else{
        parentNode = idsMap['$'+ item.parentId];
        
      }
      parentNode.children.push(node);
    }
  }
  return result;
}

这个转换函数不受数据关系层级的限制,无论有多少层关系,只要一次循环就能搞定。假如一群人都是爷爷、父亲、儿子、孙子的关系,每个人只知道自己的位置和他父亲的位置。所有人拿一根线,从他自己的位置开始,走到他父亲的位置,那么这个树形结构就完成了。

在这里,我们用一个 idsMap 比喻这样的集合,id 作位健值。每个节点有自己和他父节点 id,找到父节点,然后把他自己 push 到父节点的 children 中。

图片描述

只要每个节点都做完了,树形就出来了。


长颈鹿
1.1k 声望14 粉丝