基于引用地址实现扁平数组转树优化

前言

相信大家在参与项目开发一般都接触过将一个有父子级关系的数组转换为树形结构的需求吧。

后端的返回的格式

 const data = [
        { id: 101, pid: null, title: '标题A' },
        { id: 102, pid: 101, title: '标题B' },
        { id: 103, pid: 101, title: '标题c' },
        { id: 104, pid: 103, title: '标题D' },
        { id: 105, pid: null, title: '标题E' },
        { id: 106, pid: 105, title: '标题F' },
    ]

一般情况下我们第一反应是递归遍历去实现这里我就不放这种实现的代码了。

下面是优化后的代码

 const arrayToTree = (items = [], judgeMaxLevel = null) => {
        const result = [];  
        const itemMap = {};  
        for (const item of items) {
            const id = item.id;
            const pid = item.pid;
            if (!itemMap[id]) { itemMap[id] = { children: [] } }
            itemMap[id] = { ...item, children: itemMap[id]['children'] };
            const treeItem = itemMap[id];  
            if (item.pid === judgeMaxLevel) {
                result.push(treeItem);
            } else {
                if (!itemMap[pid]) {itemMap[pid] = { children: [] }};
                itemMap[pid].children.push(treeItem);
            }
        }
        return result;
    }

输出:

那么接下来让我们来分析一下如何实现的吧

1、创建结果集、itemMap暂存每一条数据

const result = []; // 存放结果集（最后输出的数据）

const itemMap = {}; // 存放改造后的每一条数据

2、遍历数组对象

将最外层的数据插入到结果集

将有父子关系的数据插入父级的children（itemMap指定属性的children中）

做容错处理itemMap中没有该属性问题或者数据没有按规则排序时

        for (const item of items) {
            const id = item.id;
            const pid = item.pid;
            if (!itemMap[id]) {
                itemMap[id] = { children: [], ...item}
            }
            const treeItem = itemMap[id]; 
            if (item.pid === judgeMaxLevel) {
                result.push(treeItem)
            } else {
                if (!itemMap[pid]) {
                    itemMap[pid] = { children: [] }
                }
                itemMap[pid].children.push(treeItem)
            }
        }

3、返回结果集

返回之后我么可以从上图看到只循环了一遍但是结果集最后输出的却是相关联的

这里的答案很简单就是引用地址

首先我们只把itemMap中judgeMaxLevel === null的两条数据返回 然后result的每一条数据中可能还有children，children是数组是复杂类型存放的是itemMap里的某个属性以此类推。

如果大佬们有更好的方法或者有啥错误请指正。