初始化数据node
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:[]} ] } ]
转换函数spa
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; }
这个转换函数不受数据关系层级的限制,不管有多少层关系,只要一次循环就能搞定。假如一群人都是爷爷、父亲、儿子、孙子的关系,每一个人只知道本身的位置和他父亲的位置。全部人拿一根线,从他本身的位置开始,走到他父亲的位置,那么这个树形结构就完成了。code
在这里,咱们用一个 idsMap 比喻这样的集合,id 做位健值。每一个节点有本身和他父节点 id,找到父节点,而后把他本身 push 到父节点的 children 中。blog
只要每一个节点都作完了,树形就出来了。图片