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

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

背景

昨天做了个需求, 关于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']]

树形遍历

深度递归遍历

  1. 递归遍历到目标节点
  2. 节点入栈
  3. 函数出栈, 节点入栈
  4. 直到函数作用结束
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;
              }
        } 
      }
   }

关键点是需要记录父节点

总结

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

相关推荐
Voyager_41 小时前
算法学习记录03——二叉树学习笔记:从两道题看透后序位置的关键作用
笔记·学习·算法
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
我搞slam6 小时前
快乐数--leetcode
算法·leetcode·哈希算法
WWZZ20256 小时前
快速上手大模型:机器学习3(多元线性回归及梯度、向量化、正规方程)
人工智能·算法·机器学习·机器人·slam·具身感知
东方佑7 小时前
从字符串中提取重复子串的Python算法解析
windows·python·算法
西阳未落8 小时前
LeetCode——二分(进阶)
算法·leetcode·职场和发展
通信小呆呆8 小时前
以矩阵视角统一理解:外积、Kronecker 积与 Khatri–Rao 积(含MATLAB可视化)
线性代数·算法·matlab·矩阵·信号处理
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端