JS树形数据转扁平化技巧详解

本文深入解析了JavaScript中树形数据扁平化的三种核心实现方式：简洁直观的递归深度优先遍历、规避栈溢出风险的迭代式栈模拟方案，以及支持层级信息保留的增强型扁平化方法；无论是渲染多级菜单、展示组织架构，还是优化搜索与筛选体验，这些实用技巧都能帮你高效地将嵌套结构转化为一维数组，兼顾可读性、健壮性与前端展示需求。

树形数据扁平化是前端开发中常见的需求，比如将嵌套的菜单、组织架构或分类数据转换成一维数组，方便渲染或搜索。JavaScript 提供了多种方式实现这一操作，核心思路是遍历树结构，把每个节点按顺序提取出来。

使用递归实现深度优先扁平化

递归是最直观的方法，通过深度优先遍历，依次访问每个子节点，并将其推入结果数组。

示例代码：

function flattenTree(tree, result = []) {
  tree.forEach(node => {
    result.push({ ...node });
    if (node.children) {
      flattenTree(node.children, result);
    }
  });
  return result;
}

说明：

• 每次处理一个节点时，先将其拷贝到结果数组
• 如果该节点有 children，则递归处理其子节点
• 适用于大多数嵌套结构，逻辑清晰

利用栈模拟递归（避免调用栈过深）

对于层级非常深的树，递归可能导致调用栈溢出。可以用栈结构手动维护遍历过程。

function flattenTreeIteratively(tree) {
  const result = [];
  const stack = [...tree];
  
  while (stack.length > 0) {
    const node = stack.pop();
    result.unshift(node); // 保证顺序可改为 unshift 或 reverse
    if (node.children) {
      stack.push(...node.children);
    }
  }
  return result;
}

注意：

• 使用数组模拟栈，pop 和 push 操作维护遍历顺序
• result 使用 unshift 可保持前序顺序，也可最后 reverse
• 更稳定，适合大数据量场景

添加层级信息便于展示

在实际应用中，可能需要保留节点的层级关系，比如用于缩进显示。

function flattenWithLevel(tree, level = 0) {
  let result = [];
  tree.forEach(node => {
    result.push({ ...node, level });
    if (node.children) {
      result = result.concat(flattenWithLevel(node.children, level + 1));
    }
  });
  return result;
}

这样每个节点都会带上 level 字段，前端可以根据 level 添加缩进样式。

基本上就这些。根据具体需求选择递归或迭代方式，是否需要保留层级信息也很关键。扁平化本身不复杂，但处理好边界和性能能让代码更健壮。

文中关于数据结构,扁平化的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS树形数据转扁平化技巧详解》文章吧，也可关注golang学习网公众号了解相关技术文章。