如何在JavaScript中使用字符串ID构建树形评论数组

现有如下格式的评论及回复数组：

[{id:"comment 1",data:"data1",parent:"comment 0"},{id:"comment 2",data:"data2",parent:"comment 1"},{id:"comment 3",data:"data3",parent:"comment 2"}]

需要将其转换为基于父ID构建children数组的树形结构，期望输出如下：

[{id:"comment 1",data:"data1",parent:"comment 0",children:[{id:"comment 2",data:"data2",parent:"comment 1",children:[{id:"comment 3",data:"data3",parent:"comment 2",children:[]}]}]}]

目前已找到整数ID的实现方案，需要适配字符串ID的对象遍历实现方法。

解决方案 #

以下是针对字符串ID的实现代码，核心思路是通过映射表快速定位父节点，无需嵌套遍历：

function buildCommentTree(comments) {
  // 创建节点映射表，存储每个节点的引用并初始化children数组
  const nodeMap = {};
  comments.forEach(comment => {
    nodeMap[comment.id] = { ...comment, children: [] };
  });

  // 遍历节点，将子节点挂载到对应父节点下
  const rootNodes = [];
  comments.forEach(comment => {
    const currentNode = nodeMap[comment.id];
    const parentNode = nodeMap[comment.parent];
    
    if (parentNode) {
      parentNode.children.push(currentNode);
    } else {
      // 父节点不在数组中，作为根节点存入结果
      rootNodes.push(currentNode);
    }
  });

  return rootNodes;
}

// 测试示例
const rawComments = [{id:"comment 1",data:"data1",parent:"comment 0"},{id:"comment 2",data:"data2",parent:"comment 1"},{id:"comment 3",data:"data3",parent:"comment 2"}];
const tree = buildCommentTree(rawComments);
console.log(JSON.stringify(tree, null, 2));

代码说明 #

• 映射表nodeMap：以字符串ID为键，存储每个节点的引用，同时给每个节点添加空的children数组，避免后续重复处理。
• 挂载逻辑：遍历每个节点时，通过parent字段从映射表中快速找到父节点，将当前节点推入父节点的children数组；若父节点不在映射表中，说明是根节点，直接加入根节点数组。
• 性能优势：时间复杂度为O(n)，仅需两次遍历原始数组，适合处理大规模评论数据。

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