基于节点层级结构实现面包屑导航的技术需求

问题说明 #

给定如下结构的节点层级数据：

{
  "nodes": [
    {
      "assetId": "cfe-3a2b-47e7-b7e9-e2e090ca0d34",
      "assetName": "IRCTC",
      "assetType": "Company"
    },
    {
      "assetId": "32d9-05b8-4293-af55-2ee4617c6ffe",
      "assetName": "Northern Railway Fleet",
      "assetType": "Fleet"
    },
    {
      "assetId": "15-b76c-426c-a272-6485359c5836",
      "assetName": "Vande Bharat Express",
      "assetType": "Train"
    }
  ],
  "edges": [
    {
      "source": "cfe-3a2b-47e7-b7e9-e2e090ca0d34",
      "destination": "32d9-05b8-4293-af55-2ee4617c6ffe",
      "relation": "HAS"
    },
    {
      "source": "32d9-05b8-4293-af55-2ee4617c6ffe",
      "destination": "15-b76c-426c-a272-6485359c5836",
      "relation": "HAS"
    }
  ]
}

其中nodes为资产节点列表，edges定义节点间的父子关联（source是父节点ID，destination是子节点ID）。需要实现createBreadcrumbs(targetAssetId)函数，传入目标节点的assetId后，生成格式如「IRCTC > Northern Railway Fleet > Vande Bharat Express」的面包屑导航文本。

解决方案 #

实现思路 #

1. 预构建节点映射表：将nodes转换为以assetId为键、assetName为值的对象，快速通过ID获取节点名称。
2. 预构建父节点映射表：将edges转换为以destination为键、source为值的对象，快速通过子节点ID找到父节点ID。
3. 从目标节点开始向上追溯：依次收集当前节点及所有父节点的名称，直到无父节点为止。
4. 调整顺序并拼接：将收集到的名称数组反转（从子到父变为从根到子），用>连接成最终字符串。

代码实现（JavaScript） #

// 假设层级数据已定义为变量hierarchyData
const hierarchyData = { /* 上述JSON数据 */ };

function createBreadcrumbs(targetAssetId) {
    // 构建节点ID到名称的映射
    const nodeMap = hierarchyData.nodes.reduce((map, node) => {
        map[node.assetId] = node.assetName;
        return map;
    }, {});

    // 构建子节点ID到父节点ID的映射
    const parentMap = hierarchyData.edges.reduce((map, edge) => {
        map[edge.destination] = edge.source;
        return map;
    }, {});

    const breadcrumbNames = [];
    let currentId = targetAssetId;

    // 循环向上收集节点名称
    while (currentId) {
        const name = nodeMap[currentId];
        if (!name) break; // 处理节点不存在的异常情况
        breadcrumbNames.push(name);
        currentId = parentMap[currentId]; // 获取父节点ID
    }

    // 反转数组得到根到目标的顺序，再拼接成面包屑格式
    return breadcrumbNames.reverse().join(' > ');
}

// 测试调用
console.log(createBreadcrumbs("15-b76c-426c-a272-6485359c5836"));
// 输出："IRCTC > Northern Railway Fleet > Vande Bharat Express"

代码说明 #

• 节点映射表：通过reduce方法遍历nodes数组，将每个节点的assetId作为键，assetName作为值存入nodeMap，避免每次查找节点都遍历数组，提升效率。
• 父节点映射表：同样用reduce遍历edges数组，将destination（子节点ID）作为键，source（父节点ID）作为值存入parentMap，快速查找父节点。
• 追溯逻辑：从目标ID开始，循环查找父节点ID，直到找不到为止，同时收集每个节点的名称。
• 格式转换：收集的名称是从子到父的顺序，反转后得到根节点到目标节点的顺序，再用>拼接成要求的面包屑格式。

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