way1:递归实现
思路:
(1)先循环遍历找出第一级数据,把数据放进新数组里
(2)再次调用函数进行循环,找出第二级数据并进行判断
如果有第二级数据,就把第二级数据添加到对应一级数据的children里面
const arr = [
{ id: '01', name: '张三', school: '清华', pid: '' },
{ id: '02', name: '李四', school: '北大', pid: '01' },
{ id: '03', name: '王五', school: '上外', pid: '01' },
{ id: '04', name: '赵六', school: '上交', pid: '' },
{ id: '05', name: '孙七', school: '武大', pid: '04' },
{ id: '06', name: '周八', school: '人大', pid: '04' },
{ id: '07', name: '吴九', school: '交大', pid: '04' },
]
// 递归-平铺数据转树形
function transDataToTree (arr, pid = '') {
const newArr = []
arr.map(item => {
// 找出第一级
if (item.pid === pid) {
newArr.push(item)
// 找出第二级
const children = transDataToTree(arr, item.id)
// 如果有第二级的数据,就加到第一级的children里面,没有就不加
if (children.length > 0) {
item.children = children
}
}
return newArr
});
return newArr
}
console.log(transDataToTree(arr), newArr);
way2:数组forEach方法
思路:
(1)遍历原数组
给每一项数据都添加一个children
生成新的数组对象obj: 里面的每一个对象以id为属性名,item为属性值
(2)再次遍历原数组进行判断
如果item有pid,就把item添加到对应上级的item.children里
如果没有上级元素,就直接放进数组返回出来
const arr = [
{ id: '01', name: '张三', school: '清华', pid: '' },
{ id: '02', name: '李四', school: '北大', pid: '01' },
{ id: '03', name: '王五', school: '上外', pid: '01' },
{ id: '04', name: '赵六', school: '上交', pid: '' },
{ id: '05', name: '孙七', school: '武大', pid: '04' },
{ id: '06', name: '周八', school: '人大', pid: '04' },
{ id: '07', name: '吴九', school: '交大', pid: '04' },
]
function tranDataToTree (arr) {
// 定义变量 接收要收到的数据
const treeArr = []
const obj = {}
// 遍历数组: 给每一项加一个children + 生成新obj
arr.forEach(item => {
item.children = []
obj[item.id] = item
})
// 再次循环数组, 如果每一个元素item有上级元素pid,就把item添加到对应上级的item.children里
// 如果没有上级元素,就直接放进treeArr里面
arr.forEach(item => {
if (obj[item.pid]) {
obj[item.pid].children.push(item)
} else {
treeArr.push(item)
}
})
return treeArr
}
console.log(transDataToTree(arr), newArr);