JS代码递归实现树形数据与线性数据互换

前言

在我们写后台管理的时候，后台给我们的数据有时候不是我们所需要的数据结构，这时候我们要根据一系列的操作得到我们想要的数据结构。

线性数据 —》 树形数据

let list = [{
    name:'一级',
    id:'1',
    pid:null
},{
    name:'二级',
    id:'2',
    pid:'1'
},{
    name:'三级1',
    id:'3-1',
    pid:'2'
},{
    name:'三级2',
    id:'3-2',
    pid:'2'
}]

let treeArr = []
function funtree(arr,tree,id) {
    if(typeof arr == 'undefined') return  // 递归结束条件
    arr.forEach(item=>{
        if(item.pid == id) {
            tree.push(item) // 一级
            if(!item.children) {
                item.children = []
                funtree(arr,item.children,item.id)
            }
        }
    })
}
let copyArr = JSON.parse(JSON.stringify(list))
// 根据第一级的pid去传funtree() 函数的第三个参数
funtree(copyArr,treeArr,null)

// 删除空的children
function del(arr) {
    if(typeof arr == 'undefined') return
    arr.forEach(item=>{
        item.children.length != 0 ? del(item.children) : delete item.children;
    })
}
del(treeArr)

console.log(list);
console.log(treeArr);

树形数据 —》 线性数据

let treeArr = [{
    name:'一级',
    id:'1',
    children:[{
        name:'二级',
        id:'2',
        children:[{
            name:'三级1',
            id:'3-1',
        },{
            name:'三级2',
            id:'3-2',
        }]
    }]
}]

let list = []
function fn(arr,list) {
    if(!arr) {	// 递归结束条件
        return
    }
    arr.forEach(item=> {
        list.push(item)	
        if(item.children) {	// 如果存在children属性
            fn(item.children,list)
        }
    })
}

let copyArr = JSON.parse(JSON.stringify(treeArr))   
fn(copyArr,list)
// 删除原有的children
list.forEach(item=>{
    if(item.children) {
        delete item.children
    }
})

console.log(list);
console.log(treeArr);