JavaScript中根据数组顺序对对象键进行排序的实现与解析

理解JavaScript对象键的排序机制

在javascript中，对象的键（属性）通常被认为是无序的，尤其是在es5及以前的版本中。虽然现代javascript引擎（es2015+）对数字键和字符串键的顺序有了一定的规范（数字键按升序，然后是按插入顺序的字符串键，最后是symbol键），但当我们需要一个完全自定义的键顺序时，就需要额外的处理。本教程将深入探讨一个具体的函数实现，该函数能够根据一个参考数组的顺序来重新排列对象的键。

示例函数 sortWeekFunction 解析

我们来看一个具体的例子，该函数旨在根据一个星期的顺序数组来排序一个表示星期的对象。

const weeksArr = ['sunday', 'monday', 'wednesday', 'thursday', 'friday'];

const weeksObj = {
  wednesday: 'wednesday',
  friday: 'friday',
  monday: 'monday',
  thursday: 'thursday',
  sunday: 'sunday',
};

const sortWeekFunction = (array, object) => {
  const newMapSortObj = new Map(Object.entries(object));
  const sortObj = Array.from(newMapSortObj)?.sort(
    (a, b) => array.indexOf(a[0]) - array.indexOf(b[0])
  );
  return Object.fromEntries(sortObj);
};

console.log(sortWeekFunction(weeksArr, weeksObj))
// 预期输出:
// {
//     sunday: 'sunday',
//     monday: 'monday',
//     wednesday: 'wednesday',
//     thursday: 'thursday',
//     friday: 'friday',
// }

该函数的核心思想是将对象转换为一个可排序的数据结构（数组），进行排序，然后再转换回对象。下面我们分步解析其工作原理。

1. 将对象转换为键值对数组 (Object.entries 和 Map)

const newMapSortObj = new Map(Object.entries(object));

• Object.entries(object): 这一步是关键的第一步。它将传入的 object（例如 weeksObj）转换为一个包含其所有自身可枚举字符串属性的 [key, value] 对数组。 对于 weeksObj，Object.entries(weeksObj) 会生成类似以下结构的数组：

  [
    ['wednesday', 'wednesday'],
    ['friday', 'friday'],
    ['monday', 'monday'],
    ['thursday', 'thursday'],
    ['sunday', 'sunday']
  ]

  请注意，这个数组的顺序通常与对象键的插入顺序一致（在现代JS引擎中）。

• new Map(...): 接下来，这个 [key, value] 对数组被用来创建一个新的 Map 对象。Map 是一种键值对集合，它会记住键的原始插入顺序。在这个特定的实现中，Map 作为一个中间步骤，将 Object.entries 的结果转换为一个 Map 实例，以便后续 Array.from 操作。

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

2. 从Map创建数组并准备排序 (Array.from)

const sortObj = Array.from(newMapSortObj);

• Array.from(newMapSortObj): 这一步将之前创建的 Map 对象 newMapSortObj 再次转换为一个数组。由于 Map 是可迭代的，Array.from 会遍历 Map 的所有 [key, value] 对，并将它们收集到一个新的数组中。 此时，sortObj 的结构与 Object.entries(object) 的初始输出相同：

  [
    ['wednesday', 'wednesday'],
    ['friday', 'friday'],
    ['monday', 'monday'],
    ['thursday', 'thursday'],
    ['sunday', 'sunday']
  ]

  至此，我们得到了一个包含原始对象所有键值对的数组，现在可以对其进行排序了。

3. 执行自定义排序 (.sort() 和 indexOf())

sort((a, b) => array.indexOf(a[0]) - array.indexOf(b[0]));

• .sort(...): 这是JavaScript数组的内置方法，用于对数组元素进行原地排序。它接受一个可选的 compareFn（比较函数）作为参数。
• compareFn: (a, b) => array.indexOf(a[0]) - array.indexOf(b[0]): 这是自定义排序逻辑的核心。
  • a 和 b 代表数组中要进行比较的两个元素，它们都是 [key, value] 形式的子数组。
  • a[0] 和 b[0] 分别访问这两个元素的键（例如，'wednesday', 'sunday'）。
  • array.indexOf(a[0]) 和 array.indexOf(b[0])：array 是传入函数的参考排序数组（例如 weeksArr）。indexOf() 方法返回给定元素在数组中找到的第一个索引。如果元素不存在，则返回 -1。
    • 例如，如果 a[0] 是 'wednesday'，weeksArr.indexOf('wednesday') 返回 2。
    • 如果 b[0] 是 'sunday'，weeksArr.indexOf('sunday') 返回 0。
  • 比较逻辑:
    • 如果 array.indexOf(a[0]) - array.indexOf(b[0]) 的结果为负数，表示 a[0] 在 array 中的索引小于 b[0] 的索引，因此 a 应该排在 b 之前。
    • 如果结果为正数，表示 a[0] 在 array 中的索引大于 b[0] 的索引，因此 b 应该排在 a 之前。
    • 如果结果为零，表示它们的相对顺序不变。 通过这种方式，sort() 方法会根据 weeksArr 中键的出现顺序来重新排列 sortObj 中的 [key, value] 对。 经过排序后，sortObj 将变为：

      [
      ['sunday', 'sunday'],
      ['monday', 'monday'],
      ['wednesday', 'wednesday'],
      ['thursday', 'thursday'],
      ['friday', 'friday']
      ]

4. 将排序后的数组转换回对象 (Object.fromEntries)

return Object.fromEntries(sortObj);

• Object.fromEntries(sortObj): 这是最后一步。它执行与 Object.entries() 相反的操作，将一个 [key, value] 对的数组转换回一个新的对象。由于 sortObj 已经按照我们期望的键顺序排列，Object.fromEntries() 将创建一个新对象，其键的顺序与 sortObj 中元素的顺序一致。 最终返回的对象将是：

  {
      sunday: 'sunday',
      monday: 'monday',
      wednesday: 'wednesday',
      thursday: 'thursday',
      friday: 'friday',
  }

  这正是我们期望的按 weeksArr 顺序排序后的对象。

  

  InsCode

  InsCode 是CSDN旗下的一个无需安装的编程、协作和分享社区

  下载

注意事项与优化

1. 对象键的本质: 严格来说，JavaScript对象本身并没有“排序”的概念，我们实际上是在创建一个新的对象，其键的排列顺序符合我们的要求。这个方法是有效的，因为它创建了一个全新的对象。

2. Map 的中间作用: 在本示例中，new Map(Object.entries(object)) 后跟 Array.from(newMapSortObj) 的步骤，实际上等同于直接使用 Object.entries(object)。Object.entries 返回的本身就是一个 [key, value] 对的数组，可以直接进行 sort 操作。因此，代码可以简化为：

   const sortWeekFunctionOptimized = (array, object) => {
     const sortObj = Object.entries(object)?.sort(
       (a, b) => array.indexOf(a[0]) - array.indexOf(b[0])
     );
     return Object.fromEntries(sortObj);
   };

   这种优化在功能上是等效的，并且更简洁。

3. indexOf 的性能: array.indexOf() 方法在每次比较时都需要遍历 array 来查找元素的索引，其时间复杂度为 O(n)，其中 n 是 array 的长度。在 sort() 方法中，比较函数可能会被调用多次（通常是 O(m log m) 次，m 是 sortObj 的长度）。因此，整个排序操作的理论时间复杂度可能达到 O(m log m * n)。 如果 array 和 object 的规模都非常大，这可能会导致性能问题。在这种情况下，可以考虑预处理 array，创建一个 Map 或普通对象来存储键到索引的映射，从而将 indexOf 的 O(n) 查找优化为 O(1)。

   const sortWeekFunctionHighPerformance = (array, object) => {
     const keyToIndexMap = new Map();
     array.forEach((key, index) => keyToIndexMap.set(key, index));
   
     const sortObj = Object.entries(object)?.sort(
       (a, b) => (keyToIndexMap.get(a[0]) || Infinity) - (keyToIndexMap.get(b[0]) || Infinity)
     );
     return Object.fromEntries(sortObj);
   };

   这里使用了 Infinity 来处理 object 中存在 array 中没有的键的情况，确保它们被排在最后。

4. 键不存在于参考数组: 如果 object 中包含 array 中不存在的键，array.indexOf() 会返回 -1。这会导致这些键在排序结果中被排在前面（因为 -1 小于任何非负索引）。如果需要将这些键排在最后，可以使用上述高性能示例中的 || Infinity 技巧，或者在比较函数中添加额外的逻辑。

总结

通过将对象转换为键值对数组，利用 Array.prototype.sort() 结合自定义比较函数和 Array.prototype.indexOf() 来确定元素的相对顺序，最后使用 Object.fromEntries() 将排序后的键值对数组重新构建为对象，我们能够有效地实现根据指定数组顺序对对象键进行排序的需求。虽然原始代码的 Map 中间步骤略显冗余，但其核心逻辑清晰且有效。在处理大规模数据时，应考虑 indexOf 的性能开销，并根据需要采用更优化的查找策略。