【算法解析】js 树形数据 转 扁平数据
在项目开发过程中，都会遇到树形数据结构与扁平数据结构的转换。
下面分享一下，树形数据结构转扁平数据结构的方法
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<arr.length;i++){ if(arr[i].childrens){//childrens存在 newArr.push(...flat(arr[i].childrens)); //递归，调用flat方法，并将返回结果push到新数组 delete arr[i].childrens;//删除原有的childrens属性 } newArr.push({...arr[i]});//三个点，展开对象，push新对象 } return newArr;//返回数组 }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<arr.length;i++){
if(arr[i].childrens){//childrens存在
newArr.push(...flat(arr[i].childrens));
delete arr[i].childrens;
}
newArr.push({...arr[i]});
}
return newArr;
}本文分享到这，关于扁平结构转树形结构，请期待下一篇文章
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-01-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号