当前位置：首页 > news >正文

【前端】【功能函数】eachTree,封装一个通用的遍历树结构的模板

news 来源：原创 2025/5/23 1:28:33

《递归遍历树结构函数 `eachTree` 的详解》

一、函数概述

eachTree 是一个用于递归遍历树结构数据的工具函数。在前端开发中，树结构数据（如菜单树、组织结构树等）经常会被使用，对树结构进行遍历并执行一些操作是常见的需求。该函数可以帮助开发者方便地对树结构中的每个节点执行自定义操作。

二、代码解释

/**
 * 递归遍历树结构
 * @param treeDatas 树
 * @param callBack 回调
 * @param parentNode 父节点
 */
export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
  treeDatas.forEach((element) => {
    const newNode = callBack(element, parentNode) || element;
    if (element.children) {
      eachTree(element.children, callBack, newNode);
    }
  });
};

参数说明：
- treeDatas：类型为 any[]，表示要遍历的树结构数据，是一个包含多个节点对象的数组。
- callBack：类型为 Fn（这里假设 Fn 是一个自定义的函数类型，通常是一个接收两个参数的函数），用于对每个节点执行自定义操作。该回调函数接收两个参数：当前节点 element 和其父节点 parentNode，并返回一个新的节点对象。
- parentNode：类型为 object，表示当前节点的父节点，默认值为空对象 {}。
函数逻辑：
- 使用 forEach 方法遍历 treeDatas 数组中的每个节点。
- 调用 callBack 函数处理当前节点，并将处理结果赋值给 newNode。如果 callBack 函数返回 null 或 undefined，则使用原节点 element 作为 newNode。
- 检查当前节点是否有 children 属性，如果有，则递归调用 eachTree 函数，继续遍历子节点。递归时，将子节点数组作为新的 treeDatas，callBack 函数保持不变，newNode 作为新的 parentNode。

三、函数作用

该函数的主要作用是对树结构数据进行深度优先遍历，并对每个节点执行自定义操作。通过传入不同的回调函数，可以实现不同的功能，如节点数据的修改、节点筛选、节点属性的统计等。

四、使用示例

以下是一个具体的使用示例，假设我们有一个菜单树结构数据，需要为每个节点添加一个 fullPath 属性，表示该节点在树中的完整路径。

// 定义树结构数据
const menuTree = [
  {
    id: 1,
    name: 'Home',
    children: [
      {
        id: 2,
        name: 'About',
        children: [
          {
            id: 3,
            name: 'Team'
          }
        ]
      }
    ]
  }
];

// 定义回调函数
const addFullPath = (node, parentNode) => {
  const parentPath = parentNode.fullPath ? `${parentNode.fullPath}/${parentNode.name}` : '';
  node.fullPath = `${parentPath}/${node.name}`;
  return node;
};

// 调用 eachTree 函数
eachTree(menuTree, addFullPath);

// 打印结果
console.log(JSON.stringify(menuTree, null, 2));