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