【前端】【功能函数】treeMapEach，对每个节点进行自定义转换的实用函数

一、功能说明

这是一个递归遍历树形结构数据，并对每个节点进行自定义转换的实用函数。它会对原始树中的每个节点执行 conversion 函数，最终生成一个包含转换后结果的新树结构。

二、核心作用

树形结构遍历：深度优先递归遍历所有子节点
数据格式转换：通过自定义函数修改节点数据结构
字段映射：可指定子节点字段名称（默认 children）
非破坏性操作：返回新对象，不修改原始数据

三、代码注释解析

/*** 递归映射树形结构* @param data 当前节点数据* @param children 子节点字段名（默认'children'）* @param conversion 节点转换函数*/
export const treeMapEach = (data: any,{ children = 'children', conversion }: { children?: string; conversion: Fn }
) => {// 判断是否存在有效子节点const haveChildren = Array.isArray(data[children]) && data[children].length > 0// 执行当前节点转换const conversionData = conversion(data) || {}// 递归处理子节点if (haveChildren) {return {...conversionData, // 合并转换后的数据[children]: data[children].map((i: number) => // 映射子节点treeMapEach(i, { children, conversion }))}} // 无子节点时直接返回else {return { ...conversionData }}
}

四、使用示例

// 示例数据
const treeData = {id: 1,name: 'Root',children: [{ id: 2, name: 'Child', children: [{ id: 3, name: 'Grandchild' }]}]
}// 转换函数：将 name 转为 label，并添加 level 字段
const convertedTree = treeMapEach(treeData, {conversion: (node) => ({label: node.name,level: node.id.toString()})
})/* 输出结果：
{label: "Root",level: "1",children: [{label: "Child",level: "2",children: [{ label: "Grandchild", level: "3" }]}]
}
*/

五、应用场景详解

数据格式化：API数据 → 前端所需格式
字段重命名：统一不同数据源的字段命名
数据过滤：通过转换函数排除特定节点
添加元数据：为每个节点附加计算属性
结构简化：去除冗余字段，精简数据结构

六、技术文章

《树形结构映射工具深度解析》

在处理树形数据时，我们常需要将原始数据转换为特定格式。treeMapEach 函数提供了一种优雅的解决方案，其核心优势在于：

1. 灵活配置

支持自定义子节点字段名，兼容不同数据格式
转换函数自由定义，满足各种业务需求
保留原始数据结构，仅修改指定内容

2. 实现原理
采用深度优先遍历策略，通过递归调用实现层级处理。每次递归都会：

执行当前节点转换
判断子节点存在性
递归处理子节点数组

3. 性能特点

时间复杂度：O(n) 线性复杂度
空间复杂度：O(n) 生成新对象
尾递归优化：适合处理深层树结构

4. 扩展应用

// 示例1：数据脱敏
treeMapEach(userData, {conversion: (node) => ({...node,phone: node.phone.replace(/^(\d{3})\d+(\d{4})$/, '$1****$2')})
})// 示例2：权限过滤
treeMapEach(menuData, {conversion: (node) => node.visible ? node : null
}).children.filter(Boolean)