![8b2801b32aeb4b0cf742513cbbde0d07.png](https://i-blog.csdnimg.cn/blog_migrate/250f84e3e0c1f19e0878d3ddf2b185f7.png)
bug收集:专门解决与收集bug的网站
网址:www.bugshouji.com
在项目开发过程中,都会遇到树形数据结构与扁平数据结构的转换。
下面分享一下,
树形数据结构转
扁平数据结构的方法
01
数据结构
树形数据结构
[{id:1, pid:0, name:'沃尔玛', childrens:[
{id:2, pid:1, name:'生鲜区', childrens:[
{id:4, pid:2, name:'鱼'},
{id:5, pid:2, name:'牛肉'}
]},
{id:3, pid:1, name:'日用品区',childrens:[
{id:6, pid:3, name:'卫生纸'},
{id:7, pid:3, name:'牙刷'}
]}
]}
扁平数据结构
[{id:1, pid:0, name:'沃尔玛'},
{id:2, pid:1, name:'生鲜区'},
{id:3, pid:1, name:'日用品区'},
{id:4, pid:2, name:'鱼'},
{id:5, pid:2, name:'牛肉'},
{id:6, pid:3, name:'卫生纸'},
{id:7, pid:3, name:'牙刷'},
{id:8, pid:7, name:'电动牙刷'},
{id:9, pid:7, name:'普通牙刷'}]
02
树形转扁平
思路 ( 递归方法 ):
1、循环数组,取出每个对象进行判断
2、如果有children属性,将children传到flat函数重复执行,并将执行的结构返回数组,加入到新数组中。然后删除当前对象的childrens属性
3、不管是否有childrens属性,都要将当前对象解构,然后加入新数组中
代码如下:
function flat(arr){ var newArr=[];//申请新数组 for(var i=0;i
03
示例代码
写了一个DEMO
代码如下:
var data=[{id:1, pid:0, name:'沃尔玛', childrens:[
{id:2, pid:1, name:'生鲜区', childrens:[
{id:4, pid:2, name:'鱼'},
{id:5, pid:2, name:'牛肉'}
]},
{id:3, pid:1, name:'日用品区',childrens:[
{id:6, pid:3, name:'卫生纸'},
{id:7, pid:3, name:'牙刷'}
]}
]}];
var flatArr= flat(data);
//递归
function flat(arr){
let newArr=[];
for(let i=0;i
if(arr[i].childrens){//childrens存在
newArr.push(...flat(arr[i].childrens));
delete arr[i].childrens;
}
newArr.push({...arr[i]});
}
return newArr;
}
本文分享到这,
关于扁平结构转树形结构,请期待下一篇公众号文章
如果喜欢这篇文章,可以支持一下哟,分享、点赞、在看 走一个,哈哈@_@
![04d3e53c7b99234ad23474a5d7f9c11a.png](https://i-blog.csdnimg.cn/blog_migrate/7a4574516847cf172777c0f654d6dffc.png)