方式一(双层循环)
注意: 只能循环两次,若想找第三第四层级则找不到
const arr = [
{ id: '29', pid: '', name: '总裁办' },
{ id: '2c', pid: '', name: '财务部' },
{ id: '2d', pid: '2c', name: '财务核算部' },
{ id: '2f', pid: '2c', name: '薪资管理部' },
{ id: 'd2', pid: '', name: '技术部' },
{ id: 'd3', pid: 'd2', name: 'Java研发部' }
]
// const arr = [
// { id: '29', pid: '', name: '总裁办' },
// {
// id: '2c',
// pid: '',
// name: '财务部',
// children: [
// { id: '2d', pid: '2c', name: '财务核算部' },
// { id: '2f', pid: '2c', name: '薪资管理部' }
// ]
// },
// {
// id: 'd2',
// pid: '',
// name: '技术部',
// children: [ { id: 'd3', pid: 'd2', name: 'Java研发部' } ]
// }
// ]
function todo(arr) {
/*
1、循环 查找 pid===id 相同的
2、找到后:需要将 pid这一项添加到id的这一项变成他的子children
*/
var newArr = [] // 返回的数据 处理之后要得到的数组
var map = {} // 方便查找数据 做的一个映射关系的对象
arr.forEach((item) => {
item.children = []
map[item.id] = item // {29:{ id: '29', pid: '', name: '总裁办' },2c:{}}
/* map= {
29:{ id: '29', pid: '', name: '总裁办' },
2c: { id: '2c', pid: '', name: '财务部' },
2d: { id: '2d', pid: '2c', name: '财务核算部' },
2f: { id: '2f', pid: '2c', name: '薪资管理部' },
d2: { id: 'd2', pid: '', name: '技术部' },
d3: { id: 'd3', pid: 'd2', name: 'Java研发部' }
}
*/
})
arr.forEach((item2) => {
var parent = map[item2.pid] // 查找的是有根节点
if (parent) {
// 表示有子children
/* parent
{ id: 'd2', pid: '', name: '技术部' },
{ id: '2c', pid: '', name: '财务部' },
*/
parent.children.push(item2)
// { id: 'd2', pid: '', name: '技术部',children:[{ id: 'd3', pid: 'd2', name: 'Java研发部' }] },
} else {
// 没有筛选到柚子节点的 没有筛选到pid 和id相同的
newArr.push(item2)
}
})
return newArr
}
console.log(todo(arr), 88)
方式二(递归算法)
const arr = [
{ id: '29', pid: '', name: '总裁办' },
{ id: '2c', pid: '', name: '财务部' },
{ id: '2d', pid: '2c', name: '财务核算部' },
{ id: '2f', pid: '2c', name: '薪资管理部' },
{ id: 'd2', pid: '', name: '技术部' },
{ id: 'd3', pid: 'd2', name: 'Java研发部' }
]
// 递归 自己调用自己
function todo2(arr, pid) {
const newArr = [];
// 查找一级根据传进来的pid和每一项的pid
arr.forEach((item) => {
if (item.pid === pid) {
// 1- 还需要往一级里面追加子children
const children = todo2(arr, item.id);
if (children) {
// 判定二级节点
item.children = children;
}
// 一级根节点
newArr.push(item);
}
});
return newArr;
}
console.log(todo2(arr, ""));