谁还不会树形结构遍历? 一文通晓

背景

昨天做了个需求, 关于element级联选择器的,后端要求只要叶子节点的数据，且只返回叶子节点的数据，需要前端遍历树取父级节点数据，来回显节点数据。(阿伟, 我不能直接给你么???????????)

案例结构

js 复制代码

let tree = [
    {
      id: 'a',
      children: [
            {
              id: 'b',
              children: [
                {
                  id: 'c',
                  children: null
                }
              ]
            },
            {
              id: 'd',
              children: [
                {
                  id: 'e',
                  children: null
                }
              ]
            },
            {
              id: 'f',
              children: [
                {
                  id: 'g',
                  children: null
                }
              ]
            }
      ]
    },
    {
      id: 'h',
      children: [
            {
              id: 'i',
              children: [
                {
                  id: 'j',
                  children: null
                }
              ]
            },
            {
              id: 'k',
              children: [
                {
                  id: 'l',
                  children: null
                }
              ]
            },
            {
              id: 'm',
              children: [
                {
                  id: 'n',
                  children: null
                }
              ]
            }
          ]

    }
   ]

输入/输出

级联选择器选择叶子节点后, 后台返回叶子节点数据处理成回显的数据.(多选)

输入	输出
['c','e']	[['a','b','c'],['a','d','e']]

树形遍历

深度递归遍历

递归遍历到目标节点
节点入栈
函数出栈, 节点入栈
直到函数作用结束

js 复制代码

findIdsByValue(root, id, stack) {
      if (!root) return;
      if (Array.isArray(root)) {
        for (const iterator of root) {
          if (iterator.id === id) {
            stack.unshift(iterator.id);
            return stack;
          }
          if (iterator.children && Array.isArray(iterator.children)) {
            const target = this.findIdsByValue(
              iterator.children,
              id,
              stack
            );
            if (target) {
              stack.unshift(iterator.id);
              return target;
            }
          }
        }
      }
    }

这里已经能够解决需求了, 然后将 findIdsByValue 函数放入目标循环体中, 循环出目标数组

优化遍历

在数据选择较多的情况下, 上述方法会浪费算力, 重新走重复的路线, 我的思路是能不能深度递归的同时, 把当前的父级路径都记录下来, 然后根据已知的回显数组来判断是否收集当前的路径.

js 复制代码

 function findLabelByValues(root, ids) {
      let stack = [];
      let targetArr = [];
      
      if(Array.isArray(ids)) {
        throw new TypeError('argument type error');
      }
      
      return recursion(root, ids, stack,targetArr);
      
      function recursion(root, ids, stack,targetArr) {
        if (!root) return;
          if (Array.isArray(root)) {
          
            for (let index =  0; index< root.length; index++ ) {
              let iterator = root[index];
              // 同级出栈
              if(index > 0) {
                stack.pop();
              }
              
              stack.push(iterator.id);

              let i = ids.findIndex(item => item == iterator.id);
              
              if(i > -1){
                ids[i] = null;
                // targetArr.push([...stack]);

                // 保证输出顺序
                targetArr[i] = [...stack];
                if(ids.findIndex(item=> item !== null) === -1) {
                  return targetArr;
                }

              }
              
              if (iterator.children && Array.isArray(iterator.children)) {
                  
                  let target =  recursion(
                    iterator.children,
                    ids,
                    stack,
                    targetArr
                  );
                  if(target) {
                    return target;
                  }
                  stack.pop();

              }
            }
         }
      }
    }

这样就完成了一次性的路径收集了, 并且一次深度遍历就能收集所有的路径了, 不用重复的递归

广度优先遍历

完成了深度优先的写法, 我也试着写了广度优先的写法

js 复制代码

function findLabelByValueMore(data, id) {
      let quene = [];
      let resultStack = [];
      
      // 首先将树元素入队列
      quene = data;
      
      // 直到队列元素清空
      // shift() 方法经常用于 while 循环的条件中。下例中每次迭代都会从一个数组中移除下一项元素，直至它成为空数组。
      while(quene.length) {
        // 删除数组第一个值, 并且返回该元素的值, 如果数组为空就返回undefined, 出队列
        let item = quene.shift();
        // 取子节点
        let child = item.children;
         // 判断取值
        if(id === item.id) {
          resultStack.unshift(item.id);
          let up = item.parent;
          // 遍历取值
          while(up) {
            resultStack.unshift(up.id);
            up = up?.parent;
          }
          return resultStack;
        }
        // 遍历子元素进队列
        if(child && Array.isArray(child)) {
              for (let index = 0; index < child.length; index++) {
                const element = child[index];
                quene.push(element);
                // 将父级元素记录在当前元素里面
                element.parent = item;
              }
        } 
      }
   }

关键点是需要记录父节点

总结

上述代码, 未处理边界条件, 和参数限制等, 文中有什么问题希望大神不吝赐教.