理解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 顺序排序后的对象。
注意事项与优化
对象键的本质: 严格来说，JavaScript对象本身并没有“排序”的概念，我们实际上是在创建一个新的对象，其键的排列顺序符合我们的要求。这个方法是有效的，因为它创建了一个全新的对象。
-
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); };这种优化在功能上是等效的，并且更简洁。
-
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 中没有的键的情况，确保它们被排在最后。
键不存在于参考数组: 如果 object 中包含 array 中不存在的键，array.indexOf() 会返回 -1。这会导致这些键在排序结果中被排在前面（因为 -1 小于任何非负索引）。如果需要将这些键排在最后，可以使用上述高性能示例中的 || Infinity 技巧，或者在比较函数中添加额外的逻辑。
总结
通过将对象转换为键值对数组，利用 Array.prototype.sort() 结合自定义比较函数和 Array.prototype.indexOf() 来确定元素的相对顺序，最后使用 Object.fromEntries() 将排序后的键值对数组重新构建为对象，我们能够有效地实现根据指定数组顺序对对象键进行排序的需求。虽然原始代码的 Map 中间步骤略显冗余，但其核心逻辑清晰且有效。在处理大规模数据时，应考虑 indexOf 的性能开销，并根据需要采用更优化的查找策略。
