根据引用ID和显示优先级重排JavaScript数组-js教程-PHP中文网

根据引用ID和显示优先级重排JavaScript数组

霞舞

发布： 2025-09-17 12:45:11

原创

410人浏览过

根据引用ID和显示优先级重排JavaScript数组

本文详细介绍了如何在JavaScript中对复杂数组进行重排序。面对包含父子关系（通过reference_id关联）和显示优先级（display_priority）的数组，我们将探讨一种结构化的解决方案，该方案能够首先根据父级元素的优先级排序，然后将子元素归类到其对应的父级之下，并确保子元素内部也按其自身的优先级进行排序，从而生成一个层级清晰、顺序合理的最终数组。

JavaScript数组层级与优先级排序教程

在前端或后端开发中，我们经常需要处理结构化数据，其中一种常见场景是对具有层级关系和自定义排序规则的数组进行重排。本文将指导您如何根据reference_id（建立父子关系）和display_priority（定义显示优先级）来重新组织一个javascript对象数组，使其呈现出清晰的层级结构和正确的显示顺序。

问题描述

假设我们从API获取到一个包含多个对象的数组，每个对象都有id、name、reference_id和display_priority等属性。其中：

id：唯一标识符。
reference_id：如果存在，表示该项是reference_id对应项的子项；如果为null，则表示该项是一个独立的父项。
display_priority：用于在同级或同父级下进行排序的优先级值（值越小优先级越高）。

我们的目标是将这个数组重新排序，使其满足以下条件：

所有父项（reference_id为null的项）应根据其自身的display_priority进行升序排序。
每个子项应紧随其对应的父项之后。
属于同一个父项的多个子项，应根据其自身的display_priority进行升序排序。

原始数据示例：

const initialData = [
  { id: 3, name: 'Parent C', reference_id: null, display_priority: 10 },
  { id: 6, name: 'Child B1', reference_id: 2, display_priority: 30 },
  { id: 1, name: 'Child B2', reference_id: 2, display_priority: 40 },
  { id: 4, name: 'Parent A', reference_id: null, display_priority: 80 },
  { id: 2, name: 'Parent B', reference_id: null, display_priority: 100 },
  { id: 5, name: 'Child C1', reference_id: 3, display_priority: 110 },
];

登录后复制

期望的重排结果：

立即学习“Java免费学习笔记（深入）”；

Logome

AI驱动的Logo生成工具

133

查看详情

[
  { id: 3, name: 'Parent C', reference_id: null, display_priority: 10 },
  { id: 5, name: 'Child C1', reference_id: 3, display_priority: 110 },
  { id: 4, name: 'Parent A', reference_id: null, display_priority: 80 },
  { id: 2, name: 'Parent B', reference_id: null, display_priority: 100 },
  { id: 6, name: 'Child B1', reference_id: 2, display_priority: 30 },
  { id: 1, name: 'Child B2', reference_id: 2, display_priority: 40 },
]

登录后复制

解决方案策略

为了实现上述复杂的排序逻辑，我们将采用以下分步策略：

分离父项和子项： 遍历原始数组，将reference_id为null的项识别为父项，其余为子项。
构建子项映射： 创建一个Map或对象，以父项的id为键，值为一个包含所有对应子项的数组。
排序子项： 对Map中每个父项下的子项数组，根据display_priority进行升序排序。
排序父项： 对所有父项数组，根据其自身的display_priority进行升序排序。
构建最终数组： 遍历已排序的父项数组。对于每个父项，先将其添加到结果数组中，然后查找其对应的已排序子项并依次添加到结果数组中。

详细实现与示例代码

下面是具体的JavaScript实现代码：

function reorderArrayByHierarchyAndPriority(data) {
  // 1. 分离父项和子项，并构建子项映射
  const parents = [];
  const childrenMap = new Map(); // Map<parentId, Array<childItem>>

  data.forEach(item => {
    if (item.reference_id === null) {
      parents.push(item);
    } else {
      if (!childrenMap.has(item.reference_id)) {
        childrenMap.set(item.reference_id, []);
      }
      childrenMap.get(item.reference_id).push(item);
    }
  });

  // 2. 排序子项
  // 对每个父项下的子项数组，根据display_priority进行升序排序
  childrenMap.forEach(children => {
    children.sort((a, b) => a.display_priority - b.display_priority);
  });

  // 3. 排序父项
  // 根据父项自身的display_priority进行升序排序
  parents.sort((a, b) => a.display_priority - b.display_priority);

  // 4. 构建最终数组
  const reorderedArray = [];
  parents.forEach(parent => {
    reorderedArray.push(parent); // 添加父项
    if (childrenMap.has(parent.id)) {
      // 添加该父项下已排序的子项
      reorderedArray.push(...childrenMap.get(parent.id));
    }
  });

  return reorderedArray;
}

// 原始数据
const initialData = [
  { id: 3, name: 'Parent C', reference_id: null, display_priority: 10 },
  { id: 6, name: 'Child B1', reference_id: 2, display_priority: 30 },
  { id: 1, name: 'Child B2', reference_id: 2, display_priority: 40 },
  { id: 4, name: 'Parent A', reference_id: null, display_priority: 80 },
  { id: 2, name: 'Parent B', reference_id: null, display_priority: 100 },
  { id: 5, name: 'Child C1', reference_id: 3, display_priority: 110 },
];

const reorderedResult = reorderArrayByHierarchyAndPriority(initialData);
console.log(JSON.stringify(reorderedResult, null, 2));

/*
期望输出:
[
  { id: 3, name: 'Parent C', reference_id: null, display_priority: 10 },
  { id: 5, name: 'Child C1', reference_id: 3, display_priority: 110 },
  { id: 4, name: 'Parent A', reference_id: null, display_priority: 80 },
  { id: 2, name: 'Parent B', reference_id: null, display_priority: 100 },
  { id: 6, name: 'Child B1', reference_id: 2, display_priority: 30 },
  { id: 1, name: 'Child B2', reference_id: 2, display_priority: 40 }
]
*/

登录后复制

注意事项

数据完整性： 确保每个对象都包含id、reference_id和display_priority字段。如果缺少这些字段，代码可能需要额外的检查或默认值处理。
孤立子项： 如果存在reference_id不为null但其对应的父项id在原始数据中不存在的子项，它们将不会被包含在最终的reorderedArray中。如果需要处理这些孤立子项，可以考虑在构建最终数组时，将childrenMap中未被使用的子项单独添加到数组末尾。
性能考量： 对于非常大的数据集（数万或数十万条记录），forEach、filter和sort操作的组合可能会有性能开销。在大多数Web应用场景中，此方法足够高效。如果遇到性能瓶颈，可以考虑更优化的数据结构或算法，例如使用哈希表进行更快的查找。
display_priority的类型： 确保display_priority是数字类型，以便进行正确的数值比较。如果它可能是字符串，需要先进行类型转换（例如 parseInt(a.display_priority) - parseInt(b.display_priority)）。
可变性： 示例代码中的sort方法会修改原数组（parents数组和childrenMap中的子项数组）。如果需要保持原始数据不变，应在排序前创建数组的副本（例如使用 [...array].sort(...)）。