JavaScript 递归构建 JSON 树形结构-js教程-PHP中文网

JavaScript 递归构建 JSON 树形结构

心靈之曲

发布： 2025-09-13 15:44:01

原创

243人浏览过

javascript 递归构建 json 树形结构

本文介绍如何使用 JavaScript 递归地构建 JSON 树形结构。通过将扁平化的数据转换为嵌套的树形结构，可以更方便地表示层级关系，并在前端界面中进行展示。本文将提供详细的代码示例，并解释关键步骤和注意事项，帮助你理解并掌握递归构建 JSON 树的方法。

递归构建 JSON 树

在 JavaScript 中，使用递归函数可以将扁平化的数据转换为树形结构的 JSON 对象。这种方法适用于具有父子关系的数据，例如组织结构、文件系统等。

基本思路：

定义一个递归函数，该函数接收一个节点作为输入。
为当前节点创建一个 JSON 对象，包含必要的属性，例如 label、name、expanded 和 items。
检查当前节点是否存在子节点。如果存在，则遍历子节点，并递归调用该函数来创建子节点的 JSON 对象。
将子节点的 JSON 对象添加到当前节点的 items 数组中。
返回当前节点的 JSON 对象。

代码示例：

立即学习“Java免费学习笔记（深入）”；

假设我们有以下格式的输入数据：

const employees = [
  { Id: 1, Name: 'Lauren Boyle', ReportsToId: null },
  { Id: 2, Name: 'Banoth Srikanth', ReportsToId: 1 },
  { Id: 3, Name: 'Stella Pavlova', ReportsToId: 2 },
  { Id: 4, Name: 'Srikanth', ReportsToId: 1 },
];

登录后复制

Id 是员工的唯一标识符，Name 是员工姓名，ReportsToId 是直接上级的 Id。

首先，我们需要将数据转换为以 ReportsToId 为键，员工列表为值的 Map：

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

function convertToMap(employees) {
  const map = new Map();
  employees.forEach((employee) => {
    const reportsToId = employee.ReportsToId || 'root'; // 根节点
    if (!map.has(reportsToId)) {
      map.set(reportsToId, []);
    }
    map.get(reportsToId).push(employee);
  });
  return map;
}

const employeeMap = convertToMap(employees);

登录后复制

然后，我们可以使用递归函数构建树形结构：

function buildTree(node, employeeMap) {
  const item = {
    label: node.Name,
    name: node.Id,
    expanded: true,
    items: [],
  };

  if (employeeMap.has(node.Id)) {
    employeeMap.get(node.Id).forEach((childNode) => {
      item.items.push(buildTree(childNode, employeeMap));
    });
  }

  return item;
}

登录后复制

最后，找到根节点并调用 buildTree 函数：

const rootNodes = employeeMap.get('root');
let treeData = [];
if (rootNodes) {
    treeData = rootNodes.map(rootNode => buildTree(rootNode, employeeMap));
}

console.log(JSON.stringify(treeData, null, 2));

登录后复制

输出结果：

[
  {
    "label": "Lauren Boyle",
    "name": 1,
    "expanded": true,
    "items": [
      {
        "label": "Banoth Srikanth",
        "name": 2,
        "expanded": true,
        "items": [
          {
            "label": "Stella Pavlova",
            "name": 3,
            "expanded": true,
            "items": []
          }
        ]
      },
      {
        "label": "Srikanth",
        "name": 4,
        "expanded": true,
        "items": []
      }
    ]
  }
]

登录后复制

注意事项：