js中平级数组和树形结构数据相互转换

Posted 2023-05-09

参考技术A

在实际的工作和业务需求中，我们经常会碰到树形数据结构，比如公司组织架构、组织层级、省市县或者事物的分类等等数据。那么在javascript中如何将数组转为树形结构和树形结构转为数组，本文就详细的来探究一下。

先来看看给出了一组怎样的数据，转换为怎样的树形结构。

后台接口返回或者面试官给你的数据：

期望的处理后的数据：

如果后台给了一个这样的数据说让前端自己去转换为树形结构或者面试官给你一组这样的数据让你手写一个转换方法，你会怎么处理？

1、递归实现

2、Map对象实现

3、filter实现

这种方法很有意思，可能大多数人想不到，也是从大佬处学到的(读书人的是怎么能叫抄呢，应该叫“窃”）。

1、reduce取树行数据的所有子集

2、递归实现

3、广度优先遍历法

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

树形数据结构:
树形数据结构是一类重要的非线性数据结构。树形数据结构可以表示数据表素之间一对多的关系。其中以树与二叉树最为常用，直观看来，树是以分支关系定义的层次结构。树形数据结构在客观世界中广泛存在，如人类社会的族谱和各种社会组织机构都可用树形数据结构来形象表示。

扁平数据结构: 如下所示

一、扁平转树形

var data=[
{pid:0,id:\'a\',value:\'陕西\'},
    {pid:\'a\',id:01,value:\'西安\'},
        {pid:01,id:301,value:\'雁塔区\'},
        {pid:01,id:302,value:\'高新区\'},
    {pid:\'a\',id:02,value:\'渭南\'},
    {pid:\'a\',id:03,value:\'咸阳\'},
{pid:0,id:\'b\',value:\'广东\'},
    {pid:\'b\',id:11,value:\'广州\'},
    {pid:\'b\',id:12,value:\'深圳\'},
    {pid:\'b\',id:13,value:\'潮汕\'},
{pid:0,id:\'c\',value:\'湖南\'},
    {pid:\'c\',id:21,value:\'长沙\'},
    {pid:\'c\',id:22,value:\'常德\'},
    {pid:\'c\',id:23,value:\'岳阳\'},
];
function toTree(data){
  let cloneData = JSON.parse(JSON.stringify(data))    // 对源数据深度克隆
  let tree = cloneData.filter((father)=>{              //循环所有项
        let branchArr = cloneData.filter((child)=>{
            return father.id == child.pid;//返回每一项的子级数组
        });
        if(branchArr.length>0){
            father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
        }
        return father.pid==0;//返回第一层
    });
    return tree;    //返回树形数据
}
var tree=toTree(data);
console.log(tree);

//递归方法：
function toTree(data) {
    // 删除 所有 children,以防止多次调用
    data.forEach(function (item) {
        delete item.children;
    });
    // 将数据存储为 以 id 为 KEY 的 map 索引数据列
    var map = {};
    data.forEach(function (item) {
        map[item.id] = item;
    });
    var val = [];
    data.forEach(function (item) {
        // 以当前遍历项，的pid,去map对象中找到索引的id
        var parent = map[item.pid];
            // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
                val.push(item);
            }
        });
        return val;
}
    console.log(toTree(data))

二、树形转扁平

var data=[
    {id: "a",pid: 0,value: "陕西",children:[
        {id: 01,pid: "a",value: "西安"},
        {id: 02,pid: "a",value: "渭南"},
        {id: 03,pid: "a",value: "咸阳"},
    ]},
    {id: "b",pid: 0,value: "广东",children:[
        {id: 11,pid: "b",value: "广州"},
        {id: 12,pid: "b",value: "深圳"},
        {id: 13,pid: "b",value: "潮汕"},
    ]},
    {id: "c",pid: 0,value: "湖南",children:[
        {id: 21,pid: "c",value: "长沙"},
        {id: 22,pid: "c",value: "常德"},
        {id: 23,pid: "c",value: "岳阳"},
    ]},    
];
function toLine(data){
    return data.reduce((arr, {id, value, pid, children = []}) =>
        arr.concat([{id, value, pid}], toLine(children)), [])
        return result;
}
var listarr=toLine(data);
console.log(listarr);