JavaScript - 递归：将平级结构转为树状结构。

前言：

在前端日常开发中，会频繁的重组来自服务端的基础数据结构，本篇文章记录采用递归的方式，将平级数据结构转为树状数据结构。

该方案解决的问题：

1、减少服务器压力，繁琐的数据结构重组交给客户端处理。

2、满足日常开发中处理平级结构转为树状结构的繁琐处理逻辑。

3、节约前端开发时间（cv快人一步????）。

4、优化用户对系统的整体体验感。

应用场景：将下列公司分部与总部相关联，组成树状结构；

[
    { id: '1000', pid: null, name: '西安总部' }, // 1级
    { id: '10001', pid: '1000', name: '西安雁塔分部 - 子公司' }, // 2级
    { id: '10002', pid: '1000', name: '西安莲湖分部 - 子公司' }, // 2级
    { id: '100021', pid: '10002', name: '西安莲湖分部 - 西桃园分部 - 子公司' }, // 3级
    { id: '2000', pid: null, name: '北京总部' }, // 1级
    { id: '20001', pid: '2000', name: '北京丰台分部 - 子公司' }, // 2级
    { id: '20002', pid: '2000', name: '北京朝阳分部 - 子公司' }, // 2级
    { id: '200021', pid: '20002', name: '北京朝阳分部 - 广渠路分部 - 子公司' } // 3级
]

代码逻辑：

1、首先封装一个工具函数，暂定为listToTree。

2、该工具函数接收三个值，分别是：重组前的数据、数据ID、重组后的数据。

listToTree(oldData = [], id = null, newData = []) {
    //   oldData 重组前的数据
    //   id      数据id
    //   newData 重组后的数据
}

3、首先找出第一级数据作为基础数据，判断条件为 id = null

listToTree(oldData = [], id = null, newData = []) {
    //   oldData 重组前的数据
    //   id      数据id
    //   newData 重组后的数据
    oldData.forEach(item => {  // 筛选一级数据
        if (item.pid === id) { newData.push(item) }
    })
    console.table(newData) // 打印一级数据
},

4、筛选出一级数据，并且给每一级添加 children 字段，用于存储子级。

5、遍历一级数据，递归调用listToTree工具函数，判断父级id是否与当前递归项的id相等，找到子级继而push到每项的children子级。

listToTree(oldData = [], id = null, newData = []) {
    //   oldData 重组前的数据
    //   id      数据id
    //   newData 重组后的数据
    oldData.forEach(item => { // 筛选出一级
        if (item.pid === id) { newData.push(item) } // 判断父级id与当前id是否相等
    })
    newData.forEach(i => { // 遍历一级
        i.children = [] // 添加children字段
        this.listToTree(oldData, i.id, i.children) // 递归调用
        if (i.children.length === 0) { // 如果不存在子级，则删除children字段
            delete i.children // 删除
        }
    })
    return newData // 返回结果
},

最终结果：采用el-tree组件展示效果

 最终简写方式：

listToTree(oldData = [], id = null, newData = []) {
    oldData.forEach(item => { item.pid === id && newData.push(item) })
    newData.forEach(i => {
        i.children = []
        this.listToTree(oldData, i.id, i.children)
        i.children.length || delete i.children
    })
    return newData
},

如果我的博客帮助你解决了开发问题，请不要吝啬你的小红心哦！❤❤????????

最后

以上就是沉静毛衣为你收集整理的JavaScript - 递归：将平级结构转为树状结构。的全部内容，希望文章能够帮你解决JavaScript - 递归：将平级结构转为树状结构。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。