JavaScript数组参照排序与未匹配处理技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript数组按参照排序及未匹配处理方法》，聊聊，我们一起来看看吧！

本文详细介绍了如何在JavaScript中根据一个参照数组的指定顺序对另一个数组进行排序，同时确保所有未在参照数组中列出的元素被统一放置在排序结果的末尾。通过利用`Array.prototype.sort()`方法与一个巧妙设计的自定义比较函数，我们能够高效且清晰地实现这一复杂的排序逻辑，适用于处理需要优先级排序并保留所有原始数据的场景。

在前端开发中，我们经常会遇到需要对数据列表进行自定义排序的需求。其中一种常见且略带挑战性的场景是：根据一个预定义的顺序列表来排列主数组中的元素，并且对于主数组中那些不在预定义列表中的元素，需要将它们统一放置在排序结果的末尾。

场景描述

假设我们有两个数组：

1. arr1 (主数据数组): 包含多个对象，每个对象都有一个唯一的id属性。

   const arr1 = [
       { id: 74, name: 'Mat', type: 'bus' },
       { id: 2, name: 'Johan', type: 'plane' },
       { id: 25, name: 'Kevin', type: 'car' },
       { id: 10, name: 'Mary', type: 'plane' },
       { id: 34, name: 'Katrin', type: 'car' }
   ];

2. arr2 (参照顺序数组): 包含一系列id，定义了arr1中部分元素的期望排序顺序。

   // arr2 可以是ID数组，也可以是包含ID的对象数组
   const arr2 = [25, 34, 10]; // 期望 id 为 25, 34, 10 的元素按此顺序排列

我们的目标是得到一个新数组，其中arr1中id为25、34、10的元素按照arr2的顺序排列在前，而arr1中id为74、2的元素（未在arr2中出现）则紧随其后，放置在排序结果的末尾。

期望的输出结果如下：

[
    { id: 25, name: 'Kevin', type: 'car' },
    { id: 34, name: 'Katrin', type: 'car' },
    { id: 10, name: 'Mary', type: 'plane' },
    { id: 74, name: 'Mat', type: 'bus' },
    { id: 2, name: 'Johan', type: 'plane' }
]

核心概念：Array.prototype.sort()与自定义比较函数

JavaScript 的 Array.prototype.sort() 方法允许我们传入一个比较函数来定义复杂的排序逻辑。比较函数接收两个参数 a 和 b，并根据以下规则返回一个值：

• 如果返回负数，则 a 会排在 b 之前。
• 如果返回正数，则 b 会排在 a 之前。
• 如果返回零，则 a 和 b 的相对位置不变（取决于具体的实现，但通常保持稳定）。

为了实现我们的需求，我们需要设计一个比较函数，能够为每个元素分配一个“优先级分数”。这个分数将决定它在排序结果中的位置。

解决方案详解

解决此问题的关键在于如何为每个元素计算一个排序“优先级”。对于arr1中的每个元素：

1. 如果其id存在于arr2中，那么它的优先级就是它在arr2中的索引（越靠前，索引越小，优先级越高）。
2. 如果其id不存在于arr2中，那么它的优先级应该低于所有在arr2中出现的元素。我们可以给它一个比arr2中任何索引都大的值，例如arr2.length。

基于此思想，我们可以定义一个辅助函数 getIndex：

/**
 * 获取元素在参照数组中的索引。
 * 如果元素ID存在于参照数组中，返回其索引；
 * 否则，返回参照数组的长度，确保其在排序时排在所有匹配项之后。
 * @param {number} id - 待查找的ID。
 * @param {Array} referenceArray - 参照ID数组。
 * @returns {number} 排序优先级值（索引或参照数组长度）。
 */
const getIndex = (id, referenceArray) => {
    // 检查 id 是否存在于参照数组中
    const index = referenceArray.indexOf(id);
    // 如果存在，返回其索引；否则，返回参照数组的长度
    return index !== -1 ? index : referenceArray.length;
};

有了 getIndex 函数，我们就可以构建 arr1.sort() 的比较函数了：

const sortedArr1 = arr1.sort((a, b) => {
    // 比较两个元素的ID在arr2中的优先级
    // 优先级低的（索引小的）会排在前面
    return getIndex(a.id, arr2) - getIndex(b.id, arr2);
});

当a.id和b.id都在arr2中时，它们会根据在arr2中的相对位置进行排序。 当a.id在arr2中而b.id不在时，getIndex(a.id, arr2)会返回一个小于arr2.length的值，而getIndex(b.id, arr2)会返回arr2.length，因此a会排在b之前。 当a.id和b.id都不在arr2中时，两者都返回arr2.length，比较结果为0，它们的相对顺序将保持不变（这取决于sort方法的稳定性）。

完整示例代码

const arr1 = [
    { id: 74, name: 'Mat', type: 'bus' },
    { id: 2, name: 'Johan', type: 'plane' },
    { id: 25, name: 'Kevin', type: 'car' },
    { id: 10, name: 'Mary', type: 'plane' },
    { id: 34, name: 'Katrin', type: 'car' }
];

// 参照数组，定义了期望的排序顺序
const arr2 = [25, 34, 10];

/**
 * 获取元素在参照数组中的索引。
 * 如果元素ID存在于参照数组中，返回其索引；
 * 否则，返回参照数组的长度，确保其在排序时排在所有匹配项之后。
 * @param {number} id - 待查找的ID。
 * @param {Array} referenceArray - 参照ID数组。
 * @returns {number} 排序优先级值（索引或参照数组长度）。
 */
const getIndex = (id, referenceArray) => {
    const index = referenceArray.indexOf(id);
    return index !== -1 ? index : referenceArray.length;
};

// 使用自定义比较函数对 arr1 进行排序
const sortedArr1 = arr1.sort((a, b) => {
    return getIndex(a.id, arr2) - getIndex(b.id, arr2);
});

console.log(sortedArr1);

/*
输出结果:
[
  { id: 25, name: 'Kevin', type: 'car' },
  { id: 34, name: 'Katrin', type: 'car' },
  { id: 10, name: 'Mary', type: 'plane' },
  { id: 74, name: 'Mat', type: 'bus' },
  { id: 2, name: 'Johan', type: 'plane' }
]
*/

注意事项与性能考量

1. arr2的格式: 示例中arr2是一个简单的ID数组。如果arr2也是一个对象数组（例如[{id: 25}, {id: 34}]），则getIndex函数需要相应修改，以从arr2的元素中提取id进行比较。

2. 时间复杂度:

   • Array.prototype.sort() 的平均时间复杂度是 O(N log N)，其中 N 是 arr1 的长度。
   • 在每次比较中，getIndex 函数会调用 Array.prototype.indexOf()，其在最坏情况下的时间复杂度是 O(M)，其中 M 是 arr2 的长度。
   • 因此，总的时间复杂度约为 O(N M log N)。

3. 性能优化: 对于非常大的数组（N 或 M 很大），indexOf 的重复调用可能会成为性能瓶颈。在这种情况下，可以考虑将 arr2 转换为一个 Map 或 Set，以便在 getIndex 中进行 O(1) 的查找：

   // 优化后的 getIndex 函数
   const arr2Map = new Map(arr2.map((id, index) => [id, index]));
   const getOptimizedIndex = (id) => {
       return arr2Map.has(id) ? arr2Map.get(id) : arr2.length;
   };
   
   const sortedOptimizedArr1 = arr1.sort((a, b) => {
       return getOptimizedIndex(a.id) - getOptimizedIndex(b.id);
   });

   通过预处理 arr2 为 Map，将 getIndex 的查找复杂度降至 O(1)，从而将总时间复杂度优化为 O(N log N + M)。

4. 稳定性: Array.prototype.sort() 在 ECMAScript 规范中不强制要求稳定性，但许多现代浏览器（如Chrome、Firefox）的实现是稳定的。这意味着当比较函数返回0时，元素的相对顺序会保持不变。在本例中，对于那些未在arr2中出现的元素，它们在原始arr1中的相对顺序会被保留。

总结

通过巧妙地结合 Array.prototype.sort() 和一个自定义的优先级计算函数，我们可以优雅地解决“根据参照数组排序并处理未匹配元素”的问题。这种方法不仅代码简洁易懂，而且通过适当的优化（如使用 Map 进行索引查找），也能满足对性能有较高要求的场景。理解这种模式有助于开发者更灵活地处理各种复杂的数组排序需求。

今天关于《JavaScript数组参照排序与未匹配处理技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！