如何利用 Array.prototype.flat() 配合映射函数实现对树形 API 数据的高效打平-js教程-PHP中文网

直接用 flat() 无法处理树形结构，需结合递归与映射函数实现高效打平：map 每节点生成[当前节点,...后代]片段再 flat()；或用 reduce 累积避免中间数组；支持层级标记、字段适配与深度限制。

如何利用 array.prototype.flat() 配合映射函数实现对树形 api 数据的高效打平

直接用 flat() 无法处理树形结构，因为它只展开固定层数的嵌套数组。要打平树（如菜单、组织架构、评论回复链），关键在于先递归地把每层子节点提取出来，再用 flat() 合并 —— 但更高效的做法是：用映射函数预处理，把每个节点及其后代“拉平”为一维数组片段，再一次性 flat(Infinity) 或分层展开。

用 map + 递归生成扁平片段

对每个节点，返回一个数组：[当前节点, ...其所有后代节点]。这样 map 的结果就是二维数组，一次 flat() 即可完成打平。

示例代码：

function flattenTree(nodes) {
  return nodes
    .map(node => [
      node,
      ...(node.children?.length ? flattenTree(node.children) : [])
    ])
    .flat();
}
// 调用后得到完全扁平的一维数组，顺序为 DFS（深度优先）

配合 flat() 实现“可控深度”打平

如果 API 返回的是多级嵌套对象（如 { id: 1, name: 'A', children: [...] }），且你只需展开到第 N 层（比如只取两级菜单），可以结合 flat(n) 和映射函数控制层级：

先用映射函数把每层节点的 children 提升到同级，并标记 level
用 flat(n) 控制最多展开 n 次，避免无限递归风险
适合处理深层但实际只需前几层的场景（如导航栏只显示两级）

避免重复计算：用 reduce + flat 替代嵌套 map

当树很深、节点很多时，多次递归调用 flattenTree 可能产生大量中间数组。更省内存的方式是用 reduce 累积结果，再配合 flat()：

function flattenTreeIterative(nodes, level = 0) {
  return nodes.reduce((acc, node) => {
    acc.push({ ...node, level });
    if (Array.isArray(node.children) && node.children.length) {
      acc.push(...flattenTreeIterative(node.children, level + 1));
    }
    return acc;
  }, []);
}
// 返回已带层级信息的扁平数组，无需额外 flat()