如何基于选定根节点构建JSON数据的层级关系？

别担心，这个问题一点都不愚钝——递归处理这种关联层级数据确实容易卡壳，尤其是怕踩进无限循环的坑，我来帮你一步步解决！

首先，我们得先理清需求：你需要根据选定的根节点name，把它的子节点和子节点对应的关联数据（也就是原始数据中以子节点name为顶级节点的内容）都串联起来，形成完整的层级结构。你的现有代码只处理了第一层子节点，没把深层的关联数据接上，递归就是解决这个问题的关键。

解决思路 #

核心是两步：

1. 先做一个快速查找映射：把原始数据里的所有节点按name存成键值对，这样我们可以瞬间通过name找到对应的完整节点，不用每次都遍历整个数组，效率高还避免重复查找。
2. 递归构建层级：写一个递归函数，输入节点name，返回构建好的层级结构。函数会先处理当前节点，再递归处理它的每个子节点，把子节点对应的完整结构接进来。

完整代码实现 #

// 你的原始JSON数据
const data = {
  "my_data": [
    { "name": "bugs_db", "type": "database", "children": [ { "name": "oss", "type": "ui" }, { "name": "dashboard", "type": "ui" }, { "name": "dev-dash", "type": "ui" } ] },
    { "name": "oss", "type": "ui", "children": [ { "name": "active-directory", "type": "nfs" }, { "name": "passive-directory", "type": "FAT32" } ] },
    { "name": "jira_db", "type": "database", "children": [ ] },
    { "name": "active_directory", "type": "nfs", "children": [] }
  ]
};

// 第一步：创建name到节点的映射表，快速查找
const dataMap = new Map();
data.my_data.forEach(item => {
  dataMap.set(item.name, item);
});

// 第二步：递归构建层级结构的函数
function buildHierarchy(nodeName, isRoot = false) {
  // 从映射表中获取原始节点，如果找不到就返回默认结构
  const originalNode = dataMap.get(nodeName);
  if (!originalNode) {
    return { name: nodeName, type: 'unknown', children: [] };
  }

  // 构建当前节点的基础结构
  const currentNode = {
    name: originalNode.name,
    type: isRoot ? 'root' : originalNode.type,
    children: []
  };

  // 递归处理每个子节点，把对应的完整结构接进来
  originalNode.children.forEach(child => {
    const childHierarchy = buildHierarchy(child.name);
    currentNode.children.push(childHierarchy);
  });

  return currentNode;
}

// 调用示例：选定bugs_db作为根节点
const selectedApp = "bugs_db";
const result = buildHierarchy(selectedApp, true);
console.log(JSON.stringify(result, null, 2));

运行这段代码，就能得到你想要的结果：

{
  "name": "bugs_db",
  "type": "root",
  "children": [
    {
      "name": "oss",
      "type": "ui",
      "children": [
        {
          "name": "active-directory",
          "type": "nfs",
          "children": []
        },
        {
          "name": "passive-directory",
          "type": "FAT32",
          "children": []
        }
      ]
    },
    {
      "name": "dashboard",
      "type": "ui",
      "children": []
    },
    {
      "name": "dev-dash",
      "type": "ui",
      "children": []
    }
  ]
}

如何避免无限循环？ #

如果你的数据里存在循环引用（比如A的子节点是B，B的子节点又是A），递归就会无限调用下去。我们可以加一个visited集合来记录已经处理过的节点，防止重复处理：

function buildHierarchy(nodeName, isRoot = false, visited = new Set()) {
  // 如果已经处理过这个节点，直接返回，避免循环
  if (visited.has(nodeName)) {
    return { name: nodeName, type: 'circular-reference', children: [] };
  }
  visited.add(nodeName);

  const originalNode = dataMap.get(nodeName);
  if (!originalNode) {
    return { name: nodeName, type: 'unknown', children: [] };
  }

  const currentNode = {
    name: originalNode.name,
    type: isRoot ? 'root' : originalNode.type,
    children: []
  };

  originalNode.children.forEach(child => {
    // 传递已访问集合的副本，避免子节点之间互相干扰
    const childHierarchy = buildHierarchy(child.name, false, new Set(visited));
    currentNode.children.push(childHierarchy);
  });

  return currentNode;
}

这样即使出现循环引用，函数也能及时停止，不会卡死。

内容的提问来源于stack exchange，提问作者user9397302