如何通过递归调用高阶函数处理树形结构的扁平化映射-js教程-PHP中文网

递归调用高阶函数实现树形结构扁平化映射，核心是解耦遍历逻辑与数据转换逻辑：高阶函数接收节点处理器和子节点键名，返回纯递归扁平化函数；支持缩进文本、路径映射等动态格式，可扩展为生成器以流式处理，兼顾内存与灵活性。

如何通过递归调用高阶函数处理树形结构的扁平化映射

递归调用高阶函数处理树形结构扁平化映射，核心是把“遍历逻辑”和“数据转换逻辑”解耦——用高阶函数接收节点处理规则，再由递归负责层级穿透。这种方式既保持可读性，又提升复用性，尤其适合需要动态生成不同格式映射（如带缩进文本、带路径ID、含父级信息等）的场景。

明确高阶函数的职责边界

高阶函数不直接写死遍历过程，而是接受两个关键参数：

一个节点处理器（callback），定义单个节点如何被映射：比如 (node, level) => `${'　'.repeat(level)}${node.name}`
子节点键名（如 'children' 或 'nodes'），用于适配不同数据源结构

它返回的是一个可复用的扁平化函数，而非最终结果。

封装递归逻辑为纯函数

递归体应无副作用、不依赖外部变量，仅靠参数传递状态（如当前层级、累积结果）。示例实现：

const createFlatMapper = (childKey = 'children', callback = node => node) => {
  const traverse = (nodes, level = 0, acc = []) => {
    if (!Array.isArray(nodes)) return acc;
    for (const node of nodes) {
      // 执行用户定义的映射逻辑
      acc.push(callback(node, level));
      // 递归处理子节点（若存在）
      if (Array.isArray(node[childKey])) {
        traverse(node[childKey], level + 1, acc);
      }
    }
    return acc;
  };
  return nodes => traverse(nodes);
};

使用时只需传入具体规则：

生成带缩进的选项文本：createFlatMapper('children', (n, l) => '　'.repeat(l) + n.name)(tree)
提取 ID→路径映射：createFlatMapper('children', (n, l, path = []) => ({ [n.id]: [...path, n.name].join('/') }))(tree)

支持中间态与流式处理

高阶函数还可返回生成器函数，避免一次性构建大数组，适合超深或超宽树：

const createFlatStream = (childKey = 'children') => function* traverse(nodes, level = 0) {
  if (!Array.isArray(nodes)) return;
  for (const node of nodes) {
    yield { node, level };
    if (Array.isArray(node[childKey])) {
      yield* traverse(node[childKey], level + 1);
    }
  }
};

配合 Array.from(stream(), ({node, level}) => ...) 或 for...of 按需消费，内存更友好。