在前端开发中,我们常遇到树形结构数据(如部门树、分类树、菜单树),需要根据给定的id数组找到对应节点的name,并按需求拼接成字符串(如 “一级分类 / 二级分类 / 三级分类”)。本文将通过递归遍历(适配任意层级树形结构)实现该需求,并处理边界情况(如 id 不存在、重复 id 等)。
const id = [2,5,7] // 选中的id
const treeData = [
{
id: 1,
name: "公司总部",
children: [
{
id: 2,
name: "技术部",
children: [
{ id: 3, name: "后端组" },
{ id: 4, name: "测试组" },
{
id: 5,
name: "前端组",
children: [
{ id: 6, name: "初级开发岗" },
{ id: 7, name: "资深开发岗" },
{ id: 8, name: "前端负责人" }
]
}
]
},
{
id: 9,
name: "产品部",
children: [
{ id: 10, name: "产品设计组" },
{ id: 11, name: "需求分析组" }
]
}
]
},
{
id: 12,
name: "分公司",
children: [
{ id: 13, name: "分公司技术部" },
{ id: 14, name: "分公司运营部" }
]
}
];
//实现方法
findNamesByIds(tree, ids) {
let result = []
function traverse(node) {
if (ids.includes(node.id)) {
result.push(node.name)
}
if (node.children) {
for (const child of node.children) {
traverse(child)
}
}
}
for (const node of tree) {
traverse(node)
}
let result= result.join(' / ')
return result
}
//使用
const result1 = this.findNamesByIds(treeData,id )
console.log(result1); // 输出:"技术部/前端组/资深开发岗"
适配任意层级的树形结构,可自定义拼接符