如何通过树转数组 (Tree to Array)：实现组织架构的层级展示-js教程-PHP中文网

树转数组的核心目标是将嵌套树结构拉平为保持父子顺序的一维数组，采用先序遍历，补充depth和path字段以保留层级信息，便于渲染、传输与筛选。

如何通过树转数组 (tree to array)：实现组织架构的层级展示

树转数组的核心目标是把嵌套的层级关系“拉平”，生成一个保持父子顺序、便于渲染或传输的一维结构。组织架构这类数据天然适合树形表达，但前端列表展示、后端接口传递、导出 Excel 等场景往往需要扁平数组。

明确转换逻辑：先序遍历最常用

组织架构强调“从上到下、从左到右”的阅读习惯，因此采用深度优先的先序遍历（根→子→孙）最为自然。每个节点被访问时立即推入结果数组，子节点按 children 数组顺序递归处理。

根部门排第一，其直属下级紧随其后
下级部门的子部门连续排列，形成清晰的缩进语义（靠 depth 字段体现）
不依赖 ID 或 parentId 字段排序，完全由原始树结构决定顺序

添加层级信息：depth 和 path 是关键字段

纯扁平数组会丢失结构信息，所以转换时通常补充两个字段：

depth：表示当前节点在树中的层级（根为 0 或 1），用于控制缩进、样式或折叠逻辑
path：用字符串记录从根到该节点的 ID 路径（如 "1/102/1024"），支持快速定位、筛选整条分支

例如：[{ id: 1, name: "CEO", depth: 0, path: "1" }, { id: 102, name: "技术部", depth: 1, path: "1/102" }, { id: 1024, name: "前端组", depth: 2, path: "1/102/1024" }]

Text Mark

一款面向文本内容处理的AI助手，可辅助用户整理、改写和分析文字信息，适用于日常写作和文本编辑等任务。

下载

代码实现（JavaScript 示例）

以下函数接收树根节点（或根节点数组），返回带 depth 和 path 的扁平数组：

function treeToArray(tree, depth = 0, path = '') {
  const result = [];
  const nodes = Array.isArray(tree) ? tree : [tree];
  
  for (const node of nodes) {
    const currentPath = path ? `${path}/${node.id}` : String(node.id);
    result.push({
      ...node,
      depth,
      path: currentPath
    });

    if (Array.isArray(node.children) && node.children.length > 0) {
      result.push(...treeToArray(node.children, depth + 1, currentPath));
    }
  }

  return result;
}

调用方式：const flatList = treeToArray(orgTree);