js中扁平数据与树形数据之间的转换

一、扁平转树形

思路 ( 递归方法 )：

1、申明一个Map对象，pid，outputObj三个变量

2、循环数组，取出每个对象对应的pid

3、判断对应的pid是否已经存在Map中，如果存在，判断childrens属性是否存在，不存在，创建一个childrens属性; 将当前对象克隆到一个新对象，加入到childrens中。并且，将当前对象的id加入到Map中(重点)

4、判断pid不在Map中存在，并且pid为0；创建一个新的对象，且将id存入Map中

    //扁平数据结构
    let data = [{id: 1, pid: 0, name: '沃尔玛'},
        {id: 2, pid: 0, name: '生鲜区'},
        {id: 3, pid: 1, name: '日用品区'},
        {id: 4, pid: 2, name: '鱼'},
        {id: 5, pid: 2, name: '牛肉'},
        {id: 6, pid: 13, name: '卫生纸'},
        {id: 7, pid: 3, name: '牙刷'},
        {id: 8, pid: 7, name: '电动牙刷'},
        {id: 9, pid: 7, name: '普通牙刷'}];
    let TreeData = GetTreeData(data);
    console.log(TreeData);

    function GetTreeData(data) {
        let TreeData = [];
        let map = new Map(); //存在id,对应所在的内存地址
        let outputObj, pid;
        for (let i = 0; i < data.length; i++) {
            pid = data[i].pid;
            if (map.has(pid)) {
                //存在，将些信息，加入到对应id=pid的对象上的children
                if (!map.get(pid).childrens)
                    map.get(pid).childrens = [];
                let obj = new Object(data[i]);
                map.get(pid).childrens.push(obj);
                //通过pid在Map中查找，并将当前对象，加入到对应的childres属性
                map.set(data[i].id, obj);
                //重点(必须也加入Map)：将当前id及对应的对象，存入Map对象中
            } else if (!map.has(pid) && pid == 0) {
                //这里处理pid不存在，且pid 为0的处理，pid不存在，且不为0的，程序不考虑这种情况
                outputObj = new Object(data[i]);
                 //加入到要返回的数组中
                TreeData.push(outputObj);
                //将id添加到Map中
                map.set(data[i].id, outputObj);
             
            }
        }
        return TreeData;
    }

链接: 视频讲解 https://www.bilibili.com/video/BV1y5411n7EH/

二、树形转扁平

思路 ( 递归方法 )：
1、循环数组，取出每个对象进行判断

2、如果有children属性，将children传到flat函数重复执行，并将执行的结构返回数组，加入到新数组中。然后删除当前对象的childrens属性

3、不管是否有childrens属性，都要将当前对象解构，然后加入新数组中

let data = [{
        id: 1, pid: 0, name: '沃尔玛', childrens: [
            {
                id: 2, pid: 1, name: '生鲜区', childrens: [
                    {id: 4, pid: 2, name: '鱼'},
                    {id: 5, pid: 2, name: '牛肉'}
                ]
            },
            {
                id: 3, pid: 1, name: '日用品区', childrens: [
                    {id: 6, pid: 3, name: '卫生纸'},
                    {id: 7, pid: 3, name: '牙刷'}
                ]
            }
        ]
    }];
    let flatArr = flat(data);
    console.log(flatArr);

    //递归
    function flat(arr) {
        let newArr = [];//申请新数组
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].childrens) {//childrens存在
                newArr.push(...flat(arr[i].childrens));
                //递归，调用flat方法，并将返回结果push到新数组      
                delete arr[i].childrens;
            }
            newArr.push({...arr[i]});//三个点，展开对象，push新对象  
        }
        return newArr;//返回数组
    }

链接: 视频讲解 https://www.bilibili.com/video/BV1Tv41147B2/