数据处理：一维数组转换为树形数据结构

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言:

本篇梳理下在项目开发过程中，遇到的关于数据处理的问题，更深的关于二叉树遍历、深度优先、广度优先算法部分的东西，笔者这里还没有学习到，就先梳理下关于数据结构的处理部分的思考。

1.转换函数transformDataToTree：

1.下面直接上处理函数:

• transformDataToTree：处理函数
• isArray:用来判断是否数组，此方法兼容ie浏览器

//将以为数组转换为树形数据结构的函数    
function transformDataToTree(data,idStr,pidStr){
    var result = [];
    var map = {};
    if(!this.isArray(data)){
        return result;
    }
    //清除之前的children
    data.forEach(function(item){
        delete item.children;
    });
    //将所有数据的id作为key键，添加到map对象中
    data.forEach(function(item){
        map[item[idStr]] = item;
    });
    //处理数据以及层级问题
    data.forEach(function(item){
        const parent = map[item[pidStr]];
        if(parent){
        // 添加parent
        if(!parent.children){
            parent.children = [];
        };
            parent.children.push(item);
        }else{
            result.push(item);
        }
    });
    return result;
}
  //用来判断是否数组，此方法兼容ie浏览器
    function isArray(arr){
        return Object.prototype.toString.call(arr) === "[object Array]";
    },

2.分析:

1.数据分析：

先来🔎观察下要被处理的数组数据:

const data = [
 { id: 1, pid: 0, name: 'a' },
 { id: 2, pid: 1, name: 'a_1' },
 { id: 3, pid: 1, name: 'a_2' },
 { id: 4, pid: 2, name: 'a_1_1' },
 { id: 5, pid: 2, name: 'a_1_2' },
]

对于需要被处理成树形数据结构的数组有一个特点,如下图:

• 数组的每条数据都会有一个证明自己唯一的标识，可能是id或者其他的什么，这里是id
• 作为父级别层面的id会作为子层级的pid,由此一层层往下延伸（真实开发的数据不一定是id和pid,这里是id和pid）

2.函数分析：

下面把注意力放到函数transformDataToTree,如下图：

• 处理函数这里接收3个参数：
  • 被处理的数组data
  • 身份🆔标识
  • 建立层级关系的🆔
• 函数中新建两个变量:
  • result(空数组）：用于返回最后生成的树形数据结构
  • map(空对象)：这个对象的key键是要被处理的数组data中的每条数据的id；这个map对象的用途是在后续forEach遍历中处理层级关系
• const parent = map[item[pidStr]]
  • parent存在:
    • parent中是否存在children：
      • 存在children:向children中添加item项
      • 不存在children:为parent新创建一个parent属性,值为[]
  • parent不存在：直接在result中添加item项