js如何获取树状结构某一个节点对应的id或者名称（使用递归）

最近突然遇到一个需求，就是我们在获取到树状结构数据的时候，假如知道了某一节点的id，那么怎么找到他对应的名称呢，又或者我们知道了最后一个子节点的id，怎么知道他父级都有那些节点呢，他们对应的节点id又是什么呢，有一个经典的例子就是饿了么UI 里的级联选择器（el-cascader ）例子：

const options = [
  {
    id: 'zhinan',
    name: '指南',
    children: [
      {
        id: 'shejiyuanze',
        name: '设计原则',
        children: [
          {
            id: 'yizhi',
            name: '一致',
            children:[
               {
                  id:'yizhi1',
                  name: '一致1',  
               },     
               {
                  id:'yizhi2',
                  name: '一致2',  
               },   
            ]    
          },
          {
            id: 'fankui',
            name: '反馈'
          }
        ]
      },
      {
        id: 'daohang',
        name: '导航',
        children: [
          {
            id: 'cexiangdaohang',
            name: '侧向导航'
          },
          {
            id: 'dingbudaohang',
            name: '顶部导航'
          }
        ]
      }
    ]
  }
];

如上图就是一个标准的树型结构数据，一个多维数组，一层套一层，一般数据后台都会写好给我们，而且id 肯定是不重复的，这样我们才能后续操作，现在，假如我们只知道 id 是 'shejiyuanze'，那么如何找到对应的名称呢？下面就是一个递归方法,直接调用这个方法，把id和他的数据穿进去就行.

  function findNameById(id, data) {
        for (let i = 0; i < data.length; i++) {
            if (data[i].id === id) {
               return data[i].name;  //名称
            } else if (data[i].children) {
            const result = findNameById(id, data[i].children);
            if (result) {
                return result;
              }
            }
        }
        return null;
   }

  //调用
  findNameById('shejiyuanze',options)

这个解决完成后突然还有个问题，因为用的级联选择器,当你要做数据回显的时候，有时候后台只给你一个 id，那怎么能找到对应的父级id集合呢，给他回显上去。下面又是一个递归方法：

//根据 最后一项的id 获取所有父级的id
    function findParentIdsById(id, data, parentIds = []) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            return parentIds;
          } else if (data[i].children) {
            const result = findParentIdsById(id, data[i].children, [...parentIds, data[i].id]);
            if (result) {
              return result;
            }
          }
        }
        return null;
    }

 //调用
 findParentIdsById('yizhi1',options)

那么把id 和源数据传进去就会得到当前id 对应的父级节点的所有id，是一个数组集合。

注意：这个数组是不包含你传进去的这个当前的id的，如果要做数据回显的话，切记把当前id 要push到数组中。

这样就会得到一个 el-cascader 对应的id 数组，把参数赋值回去，这个级联选择器就能回显了。

有不懂的可以评论留言。。。

js如何获取树状结构某一个节点对应的id或者名称（使用递归）

猜你喜欢