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

最新推荐文章于 2023-06-04 23:39:29 发布

uu盘

最新推荐文章于 2023-06-04 23:39:29 发布

阅读量682

点赞数 3

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_51328823/article/details/122848981

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何将线性数据结构转换为树形数据结构，以及如何将树形数据结构还原为线性数据。通过示例代码展示了递归函数在处理这两种转换中的应用，并提供了删除空children的辅助操作。此外，还提供了两种数据结构的转换实例，帮助读者理解转换过程。

摘要由CSDN通过智能技术生成

前言

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

线性数据 —》树形数据

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);