扁平数组和树形结构的相互转换

mgckid 发布于2019-08-23 13:49 / 3252人阅读

摘要：引言最近接手一个项目中很多地方需要用到树形结构表格等，因此自己封了个的树和表格组件，需要经常对两种形式的数据进行相互转换，这里记录下转换的方法，组件等有时间再完善下也发上来。

引言

最近接手一个项目中很多地方需要用到树形结构表格等，因此自己封了个VUE的树和表格组件，需要经常对两种形式的数据进行相互转换，这里记录下转换的方法，组件等有时间再完善下也发上来。

扁平数组转换为树形结构

这个是最常用的，当我们从后台获取一个扁平数组的时候，通常比如用id、pid来标识父子关系，如：

var arr = [{id: 1, pid: "-1"},{id: 11, pid: "1"},{id: 12, pid: "1"}]

用map记录的方法是最常用效果也最好的复杂度是O(nlgn),支持多个根节点:

function listToTree(list) {
    var map = {}, node, tree= [], i;
    for (i = 0; i < list.length; i ++) {
        map[list[i].id] = list[i]; 
        list[i].children = []; 
    }
    for (i = 0; i < list.length; i += 1) {
        node = list[i];
        if (node.pid !== "-1") {
            map[node.pid].children.push(node);
        } else {
            tree.push(node);
        }
    }
    return tree;
}

listToTree(arr); //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}]

但是项目中有个需求，在后台没有返回给带层级信息level的时候，需要用到层级信息，这样转换没法计算出层级，因此就需要用迭代的方法了，默认根节点层级为0，依次递增：

function listToTreeWithLevel(list, parent, level) {
    var out = []
    for (var node of list) {  
            if (node.pid == parent) {
                node.level = level;
                var children = listToTreeWithLevel(list, node.id, level + 1)
                if (children.length) {
                    node.children = children
                }
                out.push(node)
            }
    }
    return out
}

listToTreeWithLevel(arr, "-1", 0) //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[],"level":1},{"id":12,"pid":"1","children":[],"level":1}],"level":0}]

树形结构转换为扁平数组

这个其实就是数据结构中的广度优先遍历：

function treeToList(tree) {
  var queen = [];
  var out = [];
  queen = queen.concat(tree);
  while(queen.length) {
      var first = queen.shift();
    if (first.children) {
        queen = queen.concat(first.children)
      delete first["children"];
    }
    
    out.push(first);
  }
  return out;
}

var tree = [{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}];
treeToList(tree) //[{"id":1,"pid":"-1"},{"id":11,"pid":"1"},{"id":12,"pid":"1"}]

参考资料

listtotree

找本数据结构看看dfs和bfs

GPU云服务器云服务器扁平数组 php 数组扁平化树形结构树形结构遍历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99604.html

扁平数组与JSON树结构互转

摘要：前言在工作中我们往往可能会遇到无限级别的分类等等的需求，往往后端返回的数据结构可能不是我们想要的数据结构，所以我们来看怎么进行处理扁平数据结构转换为树型结构解忧杂货铺解忧杂货铺解忧杂货铺解忧杂货铺解忧杂货铺解忧杂货铺前言在工作中我们往往可能会遇到无限级别的分类等等的需求，往往后端返回的数据结构可能不是我们想要的数据结构，所以我们来看怎么进行处理扁平数据结构转换为JSON树型结构 [ ...

silvertheo 2019-05-22 18:00 评论0 收藏0
实现一个可无限折叠的table

摘要：但实际上就是在上点击时对其子集进行隐藏或显示通过缩进的距离来表现层级关系在代码里很东西其实都是伪装出来的，例如我们要实现的这个可无限折叠的。前言如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其实这个项...

crossea 2019-08-26 12:23 评论0 收藏0
vue+element tree(树形控件数据格式)组件(1)

摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。首先说说需求，就是点击出现弹窗+蒙板...

Pines_Cheng 2019-08-02 16:05 评论0 收藏0
vue+element tree(树形控件数据格式)组件(1)

摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。首先说说需求，就是点击出现弹窗+蒙板...

wangdai 2019-08-23 11:56 评论0 收藏0