如何排序嵌套评论数组，使子评论紧随对应父评论之后？

嘿，这个需求我之前做评论系统的时候正好碰到过！你要的效果是让所有子评论（哪怕是回复的回复）都直接跟在对应的父评论后面，整个父+所有子评论的块统一加一层缩进，而不是子评论再单独缩进，对吧？那核心就是把评论数组重新排序，形成「顶级评论 → 它的所有子/孙评论 → 下一个顶级评论 → 它的所有子/孙评论」这样的顺序。

前提：评论数据结构 #

首先假设你的评论数组里每个元素至少包含两个核心字段：

• id：评论的唯一标识
• parentId：父评论的ID（顶级评论可以设为null或者0）

举个示例数据：

const comments = [
  { id: 1, parentId: null, content: "这是顶级评论A" },
  { id: 2, parentId: 1, content: "这是A的子评论1" },
  { id: 3, parentId: 2, content: "这是A的子评论1的回复" },
  { id: 4, parentId: null, content: "这是顶级评论B" },
  { id: 5, parentId: 4, content: "这是B的子评论1" },
];

方法1：递归排序（支持任意层级嵌套） #

这个方法可以处理所有层级的子评论，把所有后代评论都直接跟在父评论后面：

function flattenComments(comments) {
  // 第一步：建立父ID到子评论的映射表
  const childCommentMap = {};
  // 收集所有顶级评论
  const topLevelComments = [];

  comments.forEach(comment => {
    if (comment.parentId === null || comment.parentId === 0) {
      topLevelComments.push(comment);
    } else {
      // 初始化映射表的键，避免报错
      if (!childCommentMap[comment.parentId]) {
        childCommentMap[comment.parentId] = [];
      }
      childCommentMap[comment.parentId].push(comment);
    }
  });

  // 递归构建评论链：父评论 + 所有子/孙评论
  const buildCommentChain = (comment) => {
    const chain = [comment];
    // 如果当前评论有子评论，递归处理并追加到链中
    if (childCommentMap[comment.id]) {
      childCommentMap[comment.id].forEach(child => {
        chain.push(...buildCommentChain(child));
      });
    }
    return chain;
  };

  // 组装最终排序后的数组
  const sortedComments = [];
  topLevelComments.forEach(comment => {
    sortedComments.push(...buildCommentChain(comment));
  });

  return sortedComments;
}

// 调用示例
const sorted = flattenComments(comments);

运行后得到的排序结果是：
顶级A → A的子1 → A的子1的回复 → 顶级B → B的子1

方法2：非递归排序（仅支持一级子评论） #

如果你的评论系统最多只有一级回复（没有回复的回复），可以用更简单的非递归写法：

function flattenSimpleComments(comments) {
  const childMap = {};
  const topLevel = [];

  comments.forEach(comment => {
    if (!comment.parentId) {
      topLevel.push(comment);
    } else {
      childMap[comment.parentId] = [...(childMap[comment.parentId] || []), comment];
    }
  });

  const sorted = [];
  topLevel.forEach(comment => {
    sorted.push(comment);
    // 直接追加当前顶级评论的所有子评论
    if (childMap[comment.id]) {
      sorted.push(...childMap[comment.id]);
    }
  });

  return sorted;
}

配合渲染实现单层级缩进 #

排序完成后，渲染逻辑就很清晰了：
遍历排序后的数组，每当遇到顶级评论，就创建一个带缩进样式的容器（比如给容器加margin-left: 20px类），把这个顶级评论放进去；后续的所有评论（直到下一个顶级评论出现）都直接放到这个容器里。这样整个容器只有一层缩进，里面的所有评论都是左对齐的，完美避免二级缩进的问题。

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