国瑞前端
当前位置: Html5+Css3 > js一维数组还原树形结构

js一维数组还原树形结构

2019-07-25 分类：Html5+Css3 作者：huanggr 阅读（2765）

js一维数组还原树形结构，今天下面的例子涉及到对数组的操作，写下笔记留着备用
给出如下一维数组

1
2
3
4
5
6
7
var arr = [
        {id:1,pid:null,name:'中国'},
        {id:2,pid:1,name:'湖北省'},
        {id:3,pid:2,name:'武汉市'},
        {id:4,pid:2,name:'恩施州'},
        {id:5,pid:1,name:'四川省'},
    ];

请写一个函数将 arr 转成如下，树状结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
obj = {
        id:1,
        pid:null,
        name:'中国',
        child:[
            {
                id:2,
                pid:1,
                name:'湖北省',
                child:[
                    {
                        id:3,
                        pid:2,
                        name:'武汉市'
                    },
                    {
                        id:4,
                        pid:2,
                        name:'恩施州'
                    }
                ]
            },
            {
                id:5,
                pid:1,
                name:'四川省'
            }
        ]
    };

下面是一个完成上面需求的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    function t(arr,removeIndex){
        if(removeIndex instanceof Array){
            for(var index of removeIndex.reverse()){
                arr.splice(index,1);
            }
        }

        if(arr.length == 1) return arr[0];

        var indexArr = arr.map(function(obj,index){
            return obj.pid;
        })

        var maxPid = Math.max.apply(null,indexArr);//找到底层的pid

        var removeIndex = [];

        var pushArr = arr.filter(function(obj,index){
            if(obj.pid == maxPid){
                removeIndex.push(index);
            }
            return obj.pid == maxPid;
        });//找到最底层的 数据

        var currentIndex = arr.findIndex(function(obj,index){
            return  obj.id == maxPid
        });//找到最底层的上一层

        arr[currentIndex].child = pushArr;//将最底层数据放到上一层的数据中

        return t(arr,removeIndex);//依次递归
    }

    t(arr);

下在逆推回去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function t1(obj,arr){
        if(!(arr instanceof Array)){
            arr = [];
        }
        if(obj.child instanceof Array){
            child = obj.child;
            for(var _obj of child){
                t1(_obj,arr)               
            }
        }
        delete obj.child;
       
        arr.push(obj);
        return arr;
    }

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(13) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"js一维数组还原树形结构"

最新评论

    暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/，我们关注Web前端开发技术，web前端开发,移动前端开发，前端资讯，同时分享前端资源和工具等，期待你的参与,了解更多..

博主独立研发主题：

广告

最近更新

广告

随机文章

广告

热门标签

前端技术博客

广告

精彩评论

广告

站点统计

  • 文章总数： 334 篇
  • 草稿数目： 86 篇
  • 分类数目： 28 个
  • 独立页面： 5 个
  • 评论总数： 109 条
  • 链接总数： 10 个
  • 标签总数： 111 个
  • 注册用户： 176 人
  • 访问总量： 8,667,867 次
  • 最近更新： 2021年7月21日
服务热线：
 

 QQ在线交流

点击这里给我发消息

 旺旺在线

点击这里给我发消息