JavaScript

2023-07-24 12:03| 来源: 网络整理| 查看: 265

前言：

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

该方案解决的问题：

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 },

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

【本文地址】

公司简介

联系我们