平铺数组与树形结构的数组相互转换

这种转换在我们日常的开发工作中其实非常常见，后端给你一个平铺的数组格式，要求你渲染成多级菜单的场景；后端返回的数据是树形结构的形式，需要转换成表格来渲染等等。
下面来看下具体的平铺数组和树形结构数组长啥样：

平铺数组：
let arrP =[
    {name:123, id: 423},
    {name:111, id: 123},
    {name: 222, id: 123},
    {name: 211, id: 222},
    {name: 345, id: 325},
    {name: 444, id: 345},
    {name: 555, id: 444}
];
树形结构数组：
let arr2 = [
{name: 123, id: 423, children: [{name: 111, id: 123}, {name: 222, id: 123, children: [{name: 211, id: 222}]}]},
{name: 345, id: 325, children: [{name: 444, id: 345, children: [{name: 555, id: 444}]}]}
]

平铺数组转树形结构数组：

const totree =  (arr) => {
    let result = [];
    let map = {};
    arr.forEach(item => map[item.name] = item);     //以name为key值，把数组转换成字符串

    arr.forEach(item => {
        let father = map[item.id]     // 通过遍历数据，用id去匹配map对象里的key值，如果有id能跟map对象的key值匹配，就说明这个key值对应的对象是有子集的
        if (father) {
            (father.children || (father.children = [])).push(item)      // 给对应的元素添加children属性，把那个item加进去
        }else {
            result.push(item)       // 如果没有map对象对应当前item，说明这个item的id是独一无二的，那么他自然就是第一级的了，把他加到result里面去
        }
    })
    return result;      // 利用复杂数组用map的形式赋值到新对象，新旧对象还存在关联关系
}
let arr2 = totree(arrP)
console.log('arr2', arr2);

运行结果：

image.png

树形结构数组转平铺数组：

// 树形结构转平铺数组
const toArr = (arr) => {
    let result = [];
    let node = [];
    node = node.concat(arr);
    while(node.length){
        let first = node.shift();   // 每一次都取node的第一项出来
        if (first.children) {
            node = node.concat(first.children);     // 如果第一项有children属性，那么就把这个children放到node的最后一项取
            delete first.children;      // 然后再删除children属性，让第一项变成普通形式{name: xxx, id: xxx}
        }
        console.log('first', first);
        result.push(first) 
    }
    return result
}
let arr3 = toArr(arr2)
console.log('arr3', arr3)
console.log('arrP', arrP)

运行结果：

image.png