【算法解析】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;
    }

视频讲解：https://www.bilibili.com/video/BV1CA411H7Nj/

如果喜欢这篇文章，欢迎添加下角“公众号” ，可以第一时间获到文章推送