在前端開發(fā)中，我們常遇到樹形結(jié)構(gòu)數(shù)據(jù)（如部門樹、分類樹、菜單樹），需要根據(jù)給定的id數(shù)組找到對(duì)應(yīng)節(jié)點(diǎn)的name，并按需求拼接成字符串（如 “一級(jí)分類 / 二級(jí)分類 / 三級(jí)分類”）。本文將通過(guò)遞歸遍歷（適配任意層級(jí)樹形結(jié)構(gòu)）實(shí)現(xiàn)該需求，并處理邊界情況（如 id 不存在、重復(fù) id 等）。

const id = [2,5,7]  // 選中的id
const treeData = [
  {
    id: 1,
    name: "公司總部",
    children: [
      {
        id: 2,
        name: "技術(shù)部",
        children: [
          { id: 3, name: "后端組" },
          { id: 4, name: "測(cè)試組" },
          {
            id: 5,
            name: "前端組",
            children: [
              { id: 6, name: "初級(jí)開發(fā)崗" },
              { id: 7, name: "資深開發(fā)崗" },
              { id: 8, name: "前端負(fù)責(zé)人" }
            ]
          }
        ]
      },
      {
        id: 9,
        name: "產(chǎn)品部",
        children: [
          { id: 10, name: "產(chǎn)品設(shè)計(jì)組" },
          { id: 11, name: "需求分析組" }
        ]
      }
    ]
  },
  {
    id: 12,
    name: "分公司",
    children: [
      { id: 13, name: "分公司技術(shù)部" },
      { id: 14, name: "分公司運(yùn)營(yíng)部" }
    ]
  }
];

//實(shí)現(xiàn)方法
  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); // 輸出："技術(shù)部/前端組/資深開發(fā)崗"

適配任意層級(jí)的樹形結(jié)構(gòu)，可自定義拼接符