JavaScript实现列表转换成树

开发树形组件时,需要树结构的数据来填充,如果此时服务器返回的是列表,那就需要我们自己来转换成树。本篇介绍了两种转换方法,供大家参考。

示例数据
var list=[
    {id: 1, name: 'child1', parentId: 0},
    {id: 2, name: 'child2', parentId: 0},
    {id: 6, name: 'child2_1', parentId: 2},
    {id: 0, name: 'root', parentId: null},
    {id: 5, name: 'child1_2', parentId: 1},
    {id: 4, name: 'child1_1', parentId: 1},
    {id: 3, name: 'child3', parentId: 0},
    {id: 7, name: 'child3_1', parentId: 3}
]

示例数据是一棵树的所有节点平铺成的列表,可以看到这棵树一共有3层,父子节点的关系通过parentId来建立。

嵌套循环法

这个方法使用了两层for循环,两层循环均遍历整个数组,在第二层循环中确定节点之间的父子关系。如果节点的parentId和另一个节点的id相等,则这两个节点是父子关系,并把子节点添加到父节点的children属性指向的数组中。这个过程跟冒泡排序类似,把所有节点之间的关系都确认了一遍
由于节点都是引用类型,只要每一个节点找到父节点,树就会自动形成,不需要额外查找孙节点,重孙乃至更深层的节点。
最后找到parentId为null的节点作为root节点,提取出来,得到我们想要的树。

function transform(list){
  var tree=[];
  for(var i=0;i<list.length;i++){
    for(var j=i;j<list.length;j++){
      if(list[j].parentId===list[i].id){
        if(list[i].children===undefined){
          list[i].children=[];
        }
        list[i].children.push(list[j]);
      }
      else if(list[j].id===list[i].parentId){
        if(list[j].children===undefined){
          list[j].children=[];
        }
        list[j].children.push(list[i]);
      }
    }
    if(list[i].parentId===null){
      tree.push(list[i]);
    }
  }
  return tree;
}

这个算法的时间复杂度是O(N^2),节点数量较多时速度会比较慢。

建索引法

建索引法的核心是把父节点相同的子节点归类,并根据它们父节点的id建立索引。实际上就是建立一个字典表,父节点id作为key,子节点组成的数组作为值。

{
    "0":[
        {id: 1, name: 'child1', parentId: 0},
        {id: 2, name: 'child2', parentId: 0},
        {id: 3, name: 'child3', parentId: 0}
    ],
    "1":[
        "0": {id: 5, name: "child1_2", parentId: 1}
        "1": {id: 4, name: "child1_1", parentId: 1}
    ],
    "2":[
        {id: 2, name: 'child2', parentId: 0}
    ],
    "3":[
        {id: 7, name: 'child3_1', parentId: 3}
    ],
    "null":[
        {id: 0, name: 'root', parentId: null}
    ]
}

如果把第一个方法运行过一遍的话,就可以看出结果已经非常明显了。通过索引快速找到children数组,赋值给对应的父节点的children属性,最后返回parentId为null的节点,即为我们需要的树。
和上一个方法一样,运用到了引用类型

function transform(list){
    const group={};
    list.forEach((item)=>{
        const parentId=item.parentId;
        if(!group.hasOwnProperty(parentId)){
            group[parentId]=[];
     }
     group[parentId].push(item);
    });
    
    list.forEach(function(item){
        var id=item.id;
        if(group.hasOwnProperty(id)){
            item.children=group;
        }
    })
    
    return group["null"];
}

经过两轮循环就完成了由列表到树的转换,时间复杂度为O(N),效率较前一种方法高出不少。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容