宝哥软件园

js将线性数据转换成树状示例代码

编辑:宝哥软件园 来源:互联网 时间:2021-08-23

在日常的开发工作中,我们经常会遇到将线性数据转换成树的需求。今天,我们将与大家分享一个简单的转换算法。

数据结构

以下是我们转换前的数据:

[{'ID' :1,' Parent _ ID' :0,' Name' : '四川省' },{'ID' :2,' Parent _ ID' 33600,' Name' : '广东省' },{' Name': '江西省' },{'ID' :5,' Parent _ ID' :1,' Name': '成都' },{ ' ID ' 33660 '

[{'id' :1,' parent _ id' :0,' name' : '四川省',' children' : [{'id' :5,' parent _ id' :1,' name ' :]。Children' : [{'id' :6,' parent _ id' 33605,' name' : '锦江区',' children' : [{'id' 33607,' parent _ id' :6,{'ID' :8,' Parent _ ID' :6,' Name' : '兰桂坊' }]} } },{'ID' :2,' Parent _ ID' :0,' Name' : '广东省Parent_id':2,' name': '东莞市',' children' : [{'id' :10,' parent _ id' :9,' Name

Letarray=[{id : 1,parent _ id : 0,姓名: '四川省' },{id : 2,parent _ id :姓名: '广东省' },{id: 3,Parent _ ID : 0 0 0,姓名: '江西省' },{ID : 5,Parent _ ID : 1,姓名3360 '成都' }, {ID : 9,Parent _ ID : 2,Name 3360 '东莞市' },{id: 10,Parent_id: 9,name: '长安镇' },{id : 11,parent _ id : 3,name : '南昌市' }]功能列表合计(列表){ let map={ }; list.forEach(item={ if(!map[item . id]){ map[item . id]=item;} });list . foreach(item={ if(item . parent _ id!==0) { map[item.parent_id]。孩子?map[item . parent _ id]. children . push(item): map[item . parent _ id]。children=[item];} });return list . filter(item={ if(item . parent _ id===0){ return item;} })} console . log(listotree(array));分析

这段代码的核心在于listToTree方法,该方法分为三个部分:

第一部分

在第一部分中,数组中的所有元素都被复制到地图中(注意:这是引用复制,这个细节非常重要)。

第二部分

执行第二次遍历之前的Map:

//地图{.' 3' : {'id' :3,' parent_id' :0,' name' : '江西省' },}然后遍历此时parent _ id不等于0的元素:

[.{id : 11,parent_id : 3,名称: '南昌' },]然后我们发现南昌有一个parent_id,我们为map[item.parent_id]设置子元素,可以从南昌的parent_id推导出来:

地图['3']。孩子?map[' 3 ']. children . push(item): map[3]。children=[item];上面的代码判断子对象是否存在,如果不存在则直接赋值;否则,它会将值推送到子代中。

在第二步之后,我们已经将子节点添加到它的父节点,但是我们没有删除之前的子节点。因此,第三部分是过滤数据,只要父节点。

摘要

需要注意的是,我们总是在地图上操作,但是结果是如何得到列表的呢?这就是上面提到的参考复制。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

更多资讯
游戏推荐
更多+