持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
情况描述
在一些业务需求中，比如以树形图构建部门，那么如何处理后端返回来的数据呢？
这里后端一般返回的数据是数组，那么我们就需要用到数组转树，主要将数组转换为对象同时增加唯一id（key）。且添加children属性，用来增加子树。
模拟数据
const a={name:'a',id:'1',pid:''}
const b={name:'b',id:'2',pid:'1'}
const c={name:'c',id:'3',pid:'2'}
if(b.pid==a.id){
a.children=b
}
if(c.pid==b.id){
b.children=c
}
console.log(a)
为了更好的理解，我们先了解一个东西：
let a={name:'zs'}
let b=a
a.age=20,
a.name='ww'
console.log(b)
这里b的输出结果是：{ name: 'ww', age: 20 }，因为这里的b = a，由于a是复杂类型，直接赋值，是将a的地址赋予b，当a发生改变，b也会发生改变。这是一个浅拷贝。
业务数据处理
拿到一组开发中后端给的扁平化数组。pid（parent id）为数组里已存在的元素的id，pid为空字符串时，表明该元素为一级元素，为“-1”时表明该元素不可删除。
const originArr=[
{
"id": "604e115c7bfcfa45d019d3e9",
"pid": "-1",
"name": "新东方教育",
"code": "1",
"introduce": "教育领军企业",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "604e21feb205b95968e13129",
"pid": "",
"name": "总裁办",
"code": "1001",
"manager": "管理员",
"introduce": "公司战略部",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "604e222bb205b95968e1312a",
"pid": "",
"name": "行政部",
"code": "XZB",
"manager": "管理员",
"introduce": "行政部",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "604e223fb205b95968e1312b",
"pid": "",
"name": "技术部",
"code": "JSB",
"manager": "孙财",
"introduce": "技术部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "604e2251b205b95968e1312c",
"pid": "",
"name": "财务部",
"code": "CWB",
"manager": "管理员",
"introduce": "财务部",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "604e2262b205b95968e1312d",
"pid": "604e2251b205b95968e1312c",
"name": "财务核算部",
"code": "CWHSB",
"manager": "管理员",
"introduce": "财务核算部",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "604e227db205b95968e1312e",
"pid": "604e2251b205b95968e1312c",
"name": "税务管理部",
"code": "SWGLN",
"manager": "管理员",
"introduce": "税务管理部",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "604e2297b205b95968e1312f",
"pid": "604e2251b205b95968e1312c",
"name": "薪资管理部",
"code": "XZGLB",
"manager": "管理员",
"introduce": "薪资管理部",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "6051ad90e93db6522c1d00d2",
"pid": "",
"name": "技术部",
"code": "JSB",
"manager": "孙财",
"introduce": "技术部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051adb6e93db6522c1d00d3",
"pid": "6051ad90e93db6522c1d00d2",
"name": "Java研发部",
"code": "JYFB",
"manager": "管理员",
"introduce": "JAVA研发部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051add6e93db6522c1d00d4",
"pid": "6051ad90e93db6522c1d00d2",
"name": "Python研发部1",
"code": "PYFB",
"manager": "罗晓晓",
"introduce": "Python研发部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051adefe93db6522c1d00d5",
"pid": "6051ad90e93db6522c1d00d2",
"name": "Php研发部",
"code": "PhpYFB",
"manager": "孙财",
"introduce": "Php研发部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051ae03e93db6522c1d00d6",
"pid": "",
"name": "运营部",
"code": "YYB",
"manager": "孙财",
"introduce": "运营部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051ae15e93db6522c1d00d7",
"pid": "",
"name": "市场部",
"code": "SCB",
"manager": "孙财",
"introduce": "市场部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051ae28e93db6522c1d00d8",
"pid": "6051ae15e93db6522c1d00d7",
"name": "北京事业部",
"code": "BJSYB",
"manager": "孙财",
"introduce": "BJSYB",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "6051ae3de93db6522c1d00d9",
"pid": "6051ae15e93db6522c1d00d7",
"name": "上海事业部",
"code": "SHSYB",
"manager": "文吉星",
"introduce": "上海事业部",
"createTime": "2021-03-17 15:18:23"
},
{
"id": "63568a9fdf28c42a9ffcaf68",
"name": "32",
"code": "324",
"manager": "董昊空",
"introduce": "234",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "63568c4cdf28c42a9ffcaf7e",
"pid": "63568744df28c42a9ffcaf35",
"name": "12",
"code": "12",
"manager": "罗晓晓",
"introduce": "12",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "63569639df28c42a9ffcc566",
"pid": "604e227db205b95968e1312e",
"name": "税务管理部324",
"code": "SWGLN324",
"manager": "董昊空",
"introduce": "税务管理部3242",
"createTime": "2021-03-14 22:47:25"
},
{
"id": "635697a7df28c42a9ffcc56f",
"pid": "6051ae3de93db6522c1d00d9",
"name": "123",
"code": "123",
"manager": "孙财",
"introduce": "123",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "635697b4df28c42a9ffcc570",
"pid": "6051ae28e93db6522c1d00d8",
"name": "112",
"code": "234",
"manager": "孙财",
"introduce": "213",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "635699d5df28c42a9ffcc576",
"name": "23435",
"code": "43534",
"manager": "乔海",
"introduce": "3454",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "63569feedf28c42a9ffcc57b",
"pid": "6051ae28e93db6522c1d00d8",
"name": "1234",
"code": "0723",
"manager": "罗晓晓",
"introduce": "长沙事业编",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "6356b127df28c42a9ffcc58c",
"pid": "6051ae3de93db6522c1d00d9",
"name": "134s",
"code": "1234",
"manager": "文吉星",
"introduce": "122",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "6356b137df28c42a9ffcc58d",
"pid": "6051ae3de93db6522c1d00d9",
"name": "134sdff",
"code": "1234fwww",
"manager": "文吉星",
"introduce": "122",
"createTime": "2022-10-12 14:16:48"
},
{
"id": "6356b174df28c42a9ffcc58e",
"pid": "6051ae3de93db6522c1d00d9",
"name": "1wgr3123",
"code": "wyehb2",
"manager": "文吉星",
"introduce": "1234",
"createTime": "2022-10-12 14:16:48"
}
]
封装transTree函数：
function transTree(arr){
const targetArr = []
// 定义map对象，用来接收第一步处理过的数据
const map = {}
arr.forEach(item => {
// 将数组的当前遍历项item的id作为key，item本身作为value，创建新的对象
map[item.id] = item
// 给map的每一项的value，增加一个children属性
map[item.id].children = []
})
// 通过pid进行匹配
arr.forEach(item => {
// 遍历arr的每一项，通过pid来匹配，查看当前项是否有父元素
if (map[item.pid]) {
// 如果有父元素，就匹配到该父元素，将当前元素押入到父元素的chiildren的属性里
map[item.pid].children.push(item)
} else {
// 如果没有父元素，表明是一级元素，直接放到targetArr中
// 即使一级元素先被放到targetArr中，后面有对该一级元素的childre的添加，或者children的children的添加，由于是浅拷贝，所以不会影响最终结果。
targetArr.push(item)
}
})
// console.log(targetArr)
}
