如何基于对象间映射键对JavaScript对象数组进行排序

要实现按previous_sibling与前一个节点的dialog_node匹配的规则排序数组，本质是构建一条单向链表并按顺序遍历。以下是具体实现思路和代码：

核心思路 #

1. 构建映射表：
   • 用dialog_node作为键，快速查找对应节点；
   • 用previous_sibling作为键，快速找到以当前节点为前驱的下一个节点。
2. 定位起始节点：找到那个previous_sibling不存在于所有dialog_node中的节点（即没有前驱的链首节点）。
3. 遍历链表：从起始节点开始，依次通过前驱映射找到下一个节点，直到遍历完整个链。

完整代码 #

export function orderDialogNodes(nodes) {
    // 构建dialog_node到节点的映射，用于快速查找节点
    const nodeMap = new Map(nodes.map(node => [node.dialog_node, node]));
    // 构建previous_sibling到节点的映射，用于快速找到后继节点
    const prevSiblingMap = new Map(nodes.map(node => [node.previous_sibling, node]));

    // 找到链首节点：其previous_sibling不在现有dialog_node集合中
    const startNode = nodes.find(node => !nodeMap.has(node.previous_sibling));

    const orderedNodes = [];
    let currentNode = startNode;

    // 遍历整个链表，生成有序数组
    while (currentNode) {
        orderedNodes.push(currentNode);
        // 找到以上一个节点的dialog_node为previous_sibling的下一个节点
        currentNode = prevSiblingMap.get(currentNode.dialog_node);
    }

    return orderedNodes;
}

// 测试输入
const inputArray = [
  {
    type: "folder",
    title: "Q&A Total Rewards",
    dialog_node: "node_2_1702794723026",
    previous_sibling: "node_1_1702793119621",
  },
  {
    type: "folder",
    title: "Q&A Payroll Taxes",
    dialog_node: "node_3_1702794877277",
    previous_sibling: "node_2_1702794723026",
  },
  {
    type: "folder",
    title: "Q&A Contacts",
    dialog_node: "node_1_1702793119621",
    previous_sibling: "node_10_1704313850082",
  },
  {
    type: "folder",
    title: "Feedback Capture Flow",
    dialog_node: "node_3_1702952290373",
    previous_sibling: "node_76_7439096406",
  },
  {
    type: "folder",
    title: "Q&A Benefits",
    dialog_node: "node_33_6664725040",
    previous_sibling: "node_3_1702794877277",
  },
  {
    type: "folder",
    title: "Q&A Perf Mgmt",
    dialog_node: "node_54_3521545375",
    previous_sibling: "node_33_6664725040",
  },
  {
    type: "folder",
    title: "Q&A Workday How To",
    dialog_node: "node_7_1702794820202",
    previous_sibling: "node_54_3521545375",
  },
  {
    type: "folder",
    title: "Q&A Learning",
    dialog_node: "node_7_1702794902054",
    previous_sibling: "node_7_1702794820202",
  },
  {
    type: "folder",
    title: "Q&A Levels",
    dialog_node: "node_76_7439096406",
    previous_sibling: "node_9_1702956631016",
  },
  {
    type: "folder",
    title: "Q&A Promo",
    dialog_node: "node_9_1702956631016",
    previous_sibling: "node_7_1702794902054",
  },
];

const orderedArray = orderDialogNodes(inputArray);
console.log(orderedArray);

输出结果说明 #

运行后得到的有序数组会按以下顺序排列：
Q&A Contacts → Q&A Total Rewards → Q&A Payroll Taxes → Q&A Benefits → Q&A Perf Mgmt → Q&A Workday How To → Q&A Learning → Q&A Promo → Q&A Levels → Feedback Capture Flow

每个节点的previous_sibling都严格匹配前一个节点的dialog_node，符合需求。

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