前端笔试题:数组转树形结构

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端笔试题:数组转树形结构脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

初始化数据

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 中。

前端笔试题:数组转树形结构

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

脚本宝典总结

以上是脚本宝典为你收集整理的前端笔试题:数组转树形结构全部内容,希望文章能够帮你解决前端笔试题:数组转树形结构所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: