const data = [
{ id: "01", name: "张大大", pid: "", job: "项目经理" },
{ id: "02", name: "小亮", pid: "01", job: "产品leader" },
{ id: "03", name: "小美", pid: "01", job: "UIleader" },
{ id: "04", name: "老马", pid: "01", job: "技术leader" },
{ id: "05", name: "老王", pid: "01", job: "测试leader" },
{ id: "06", name: "老李", pid: "01", job: "运维leader" },
{ id: "07", name: "小丽", pid: "02", job: "产品经理" },
{ id: "08", name: "大光", pid: "02", job: "产品经理" },
{ id: "09", name: "小高", pid: "03", job: "UI设计师" },
{ id: "10", name: "小刘", pid: "04", job: "前端工程师" },
{ id: "11", name: "小华", pid: "04", job: "后端工程师" },
{ id: "12", name: "小李", pid: "04", job: "后端工程师" },
{ id: "13", name: "小赵", pid: "05", job: "测试工程师" },
{ id: "14", name: "小强", pid: "05", job: "测试工程师" },
{ id: "15", name: "小涛", pid: "06", job: "运维工程师" }
]
function fn(pid) {
return data.reduce((sum, obj) => {
if (obj.pid === pid) {
obj.children = fn(obj.id)
sum.push(obj)
}
return sum
}, [])
}
console.log(fn(''));
------------------------------------------------------------------------------------
////第二种递归方案
function fn2(list, pid = '') {
// 先找到所有的根节点
let tranList = list.filter(it => it.pid === pid)
tranList.forEach(itm => {
//传入id list进行递归 在筛选出 他的父级 是一个数组
itm.children = fn2(list, itm.id)
})
return tranList
}
console.log(fn2(data));

还有第二种双重for循环,这种方法较为好理解
tranListToTreeData(list) {
// 最终要产出的树状数据的数组
const treeList = []
// 所有项都使用对象存储起来
const map = {}
// 建立一个映射关系:通过id快速找到对应的元素
list.forEach(item => {
if (!item.children) {
item.children = []
}
map[item.id] = item
})
// map:
// {
// "312c": { 'id': '312c', 'pid': '', 'name': '财务部', children: [{ 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}] },
// "312d": { 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}
// }
list.forEach(item => {
// 对于每一个元素来说,先找它的上级
// 如果能找到,说明它有上级,则要把它添加到上级的children中去
// 如果找不到,说明它没有上级,直接添加到 treeList
const parent = map[item.pid]
// 如果存在上级则表示item不是最顶层的数据
if (parent) {
parent.children.push(item)
} else {
// 如果不存在上级 则是顶层数据,直接添加
treeList.push(item)
}
})
// 返回出去
return treeList
}
本文介绍了两种JavaScript实现的递归方法,分别是fn()函数和fn2()函数,用于将人员结构数据转换为树形结构。同时,展示了如何用双重for循环清晰地构建层级关系。这些技术在项目管理中有助于理解和展示组织架构信息。

被折叠的 条评论
为什么被折叠?



