js获取树形结构的最深层级数和获取节点的方法

使用场景：用户可选择树形结构需要展示的层级

解决思路：第一步我们需要拿到这个树形结构最大的层级，从第一层到最大层级来展示给用户选择需要展开的层级；第二步用户点击层级后需到拿到展示层级的所有节点id，来控制节点是否展开。

解决方法：需要用递归来实现，以下写了根数据是数组和对象的两种情况下的递归方法。

第一步：获取树形结构的最大深度

根数据为数组时：

  const treeArr = [
    {
      id: '1',
      name: '1',
      children: [
        {
          id: '1-1',
          name: '1-1',
          children: [
            {
              id: '1-1-1',
              name: '1-1-1'
            }
          ]
        }
      ]
    },
    {
      id: '2',
      name: '2',
      children: [
        {
          id: '2-1',
          name: '2-1',
          children: []
        }
      ]
    },
    {
      id: '3',
      name: '3',
      children: []
    },

  ]

  // 树形结构的深度
  const getFloors = (root, onePathDeep = 1, deepArr = []) => {
    for (let i = 0; i < root.length; i++) {
      if (root[i] == null) return 0
      if (!root[i].children?.length) {
        deepArr.push(onePathDeep)
      } else {
        onePathDeep++
        getFloors(root[i].children, onePathDeep, deepArr)
      }
    }
    return Math.max(...deepArr);
  }

  getFloors(treeArr) 参数1：根数组 参数2和参数3不传
  // 输出结果为3

根数据为对象时：

  const treeObj = {children:[
    {
      id: '1',
      name: '1',
      children: [
        {
          id: '1-1',
          name: '1-1',
          children: [
            {
              id: '1-1-1',
              name: '1-1-1'
            }
          ]
        }
      ]
    },
    {
      id: '2',
      name: '2',
      children: [
        {
          id: '2-1',
          name: '2-1',
          children: []
        }
      ]
    },
    {
      id: '3',
      name: '3',
      children: []
    },
  ]} 

 // 树形结构的深度
  const getFloors = (root, onePathDeep = 0, deepArr = []) => {
    if (!root || typeof root !== 'object') return 0
    if (!root.children?.length) {
      deepArr.push(onePathDeep)
    } else {
      onePathDeep++
      for (let i = 0; i < root.children.length; i++) {
        getFloors(root.children[i], onePathDeep, deepArr)
      }
    }
    return Math.max(...deepArr);
  }

  getFloors(treeObj) 参数1：根对象 参数2和参数3不传
  // 输出结果为3  

第二步：获取树形结构要展示的层级的id

根数据是数组时：

// 树形结构的展示的层级
  const getExpandedKeys = (root, hierarchy = -1, onePathDeep = -1, deepArr = []) => {
    if (hierarchy == 0) return []
    onePathDeep++
    root.map(item => {
      if (hierarchy !== onePathDeep || hierarchy == -1) {
        deepArr.push(item.id)
        if (item.children?.length) {
          getExpandedKeys(item.children, hierarchy, onePathDeep, deepArr)
        }
      }
    })
    return deepArr
  }

  getExpandedKeys(treeArr, 2) 参数1：根数组 参数2：展示层级 参数3和参数4不传
  // 输入结果为 ['1', '1-1', '2', '2-1', '3']

根数据为对象时：

  // 树形结构的展示的层级
  const getExpandedKeys = (root, hierarchy = -1, onePathDeep = 0, deepArr = []) => {
    if (hierarchy == 0) return []
    if (hierarchy !== onePathDeep || hierarchy == -1) {
      if (root.children?.length) {
        onePathDeep++
        root.children.map(item => {
          deepArr.push(item.id)
          getExpandedKeys(item, hierarchy, onePathDeep, deepArr)
        })
      }
    }
    return deepArr
  }

  getExpandedKeys(treeArr, 1); // 参数1：根对象 参数2：展示层级 参数3和参数4不传 
  // 输入结果为 ['1', '2', '3']