理解JavaScript中对象键的排序机制
在javascript中，传统的对象（object）本身并不保证其键的顺序，尤其是在es2015之前。虽然现代javascript引擎对字符串键的插入顺序有所保留，但若需要严格且自定义的顺序，通常需要借助其他数据结构或特定的操作。本教程将介绍一种通过参考数组来对对象键进行排序的实用方法。
需要明确的是，我们并非对“对象”本身进行排序，而是对对象的“键”（keys）进行排序，并根据这个排序后的键顺序重新构建一个新的对象。对于需要保持严格顺序的集合，数组（Array）通常是更合适的选择。然而，在某些特定场景下，我们可能仍需按自定义顺序呈现对象的键值对。
核心排序函数解析
以下是实现这一功能的关键代码：
const weeksArr = ['sunday', 'monday', 'wednesday', 'thursday', 'friday'];
const weeksObj = {
wednesday: 'wednesday',
friday: 'friday',
monday: 'monday',
thursday: 'thursday',
sunday: 'sunday',
};
const sortWeekFunction = (array, object) => {
// 1. 将对象转换为Map，再转换为数组的键值对形式
const newMapSortObj = new Map(Object.entries(object));
const sortObj = Array.from(newMapSortObj)?.sort(
// 2. 使用自定义比较函数进行排序
(a, b) => array.indexOf(a[0]) - array.indexOf(b[0])
);
// 3. 从排序后的键值对数组重新构建对象
return Object.fromEntries(sortObj);
};
console.log(sortWeekFunction(weeksArr, weeksObj));运行上述代码将得到如下输出：
// {
// sunday: 'sunday',
// monday: 'monday',
// wednesday: 'wednesday',
// thursday: 'thursday',
// friday: 'friday',
// }这个函数是如何实现排序的呢？我们来逐步拆解。
立即学习“Java免费学习笔记（深入）”；
1. 提取对象条目并准备排序数据
const newMapSortObj = new Map(Object.entries(object)); const sortObj = Array.from(newMapSortObj);
-
Object.entries(object): 这一步是关键的起点。它将传入的object（例如weeksObj）转换为一个包含其所有自身可枚举字符串键值对的数组。每个键值对都是一个[key, value]形式的子数组。 对于weeksObj，Object.entries(weeksObj)会生成：
[ ['wednesday', 'wednesday'], ['friday', 'friday'], ['monday', 'monday'], ['thursday', 'thursday'], ['sunday', 'sunday'] ]
请注意，此时这个数组的顺序可能与原始对象的插入顺序有关，但尚未达到我们期望的weeksArr的顺序。
new Map(...): 接着，Object.entries()的结果被用来构造一个新的Map对象。Map是ES6引入的一种键值对集合，它能记住键的原始插入顺序。然而，在这个特定的代码路径中，Map的创建主要是作为一种中间步骤，因为它随后又被转换回了数组。
Array.from(newMapSortObj): 这一步将Map对象转换回一个数组，其中每个元素依然是[key, value]形式的子数组。实际上，Array.from(new Map(Object.entries(object))) 的结果与直接使用 Object.entries(object) 的结果在结构上是相同的，即一个包含键值对子数组的数组。这个数组就是我们接下来要进行排序的数据。
2. 自定义排序逻辑
.sort((a, b) => array.indexOf(a[0]) - array.indexOf(b[0]))
这是实现自定义排序的核心部分。Array.prototype.sort() 方法用于对数组的元素进行原地排序并返回数组。如果提供了compareFn（比较函数），数组元素将根据compareFn的返回值进行排序。
比较函数 (a, b) => ...: 这个箭头函数接收两个参数 a 和 b，它们代表数组中待比较的两个元素。在本例中，a 和 b 都是 [key, value] 形式的子数组。
a[0] 和 b[0]: 我们需要根据键进行排序，所以这里取 a 和 b 的第一个元素，即它们的键（例如'wednesday'或'sunday'）。
-
array.indexOf(a[0]): 这一步是关键。它查找键 a[0] 在参考数组 array（即 weeksArr）中的索引位置。
- 例如，weeksArr.indexOf('sunday') 返回 0。
- weeksArr.indexOf('wednesday') 返回 2。
-
array.indexOf(a[0]) - array.indexOf(b[0]): 比较函数的返回值决定了 a 和 b 的相对顺序：
- 如果结果为负数，表示 a 应该排在 b 之前。
- 如果结果为正数，表示 b 应该排在 a 之前。
- 如果结果为零，表示 a 和 b 的相对顺序不变。
举例来说，如果 a[0] 是 'sunday' (索引 0)，b[0] 是 'wednesday' (索引 2)： 0 - 2 = -2。由于结果是负数，'sunday' 对应的键值对会排在 'wednesday' 对应的键值对之前。
通过这种方式，sort() 方法会遍历所有键值对，并根据它们在 weeksArr 中的相对位置进行排序，最终得到一个按照 weeksArr 顺序排列的键值对数组。
3. 重构为新对象
return Object.fromEntries(sortObj);
- Object.fromEntries(sortObj): 这是一个ES2019引入的方法，它执行 Object.entries() 的逆操作。它接收一个由 [key, value] 对组成的数组（即我们排序后的 sortObj），并返回一个新的对象，其中包含这些键值对。由于 sortObj 已经按照 weeksArr 的顺序排列，因此新创建的对象也将按照这个顺序拥有其键。
注意事项与最佳实践
对象键的顺序保证: 尽管现代JavaScript引擎通常会保留字符串键的插入顺序，但依赖这种行为进行排序并非最健壮的做法。如果对顺序有严格要求，通常应将排序后的键存储在一个数组中，或者直接使用数组作为主要数据结构。
-
indexOf 的性能: Array.prototype.indexOf() 在大型数组中查找元素的效率是线性的（O(n)）。如果 array 非常大，且需要频繁调用 sortWeekFunction，这可能会导致性能问题。对于这种情况，可以预先将 array 转换为一个 Map 或 Object，将元素映射到它们的索引，从而将查找时间复杂度降低到接近常数时间（O(1)）。
const sortWeekFunctionOptimized = (array, object) => { // 创建一个索引映射，提高查找效率 const orderMap = new Map(); array.forEach((item, index) => { orderMap.set(item, index); }); const sortedEntries = Object.entries(object)?.sort( (a, b) => orderMap.get(a[0]) - orderMap.get(b[0]) ); return Object.fromEntries(sortedEntries); };这种优化在处理大量数据时尤为重要。
键的存在性: 确保 object 中的所有键都在 array 中有对应的条目。如果 object 中存在 array 中没有的键，indexOf 会返回 -1，这可能会导致这些键被排序到最前面（因为 -1 是最小的索引）。根据需求，你可能需要处理这种情况，例如过滤掉这些键，或者将它们排在最后。
总结
通过将对象转换为键值对数组，利用 Array.prototype.sort() 结合 Array.prototype.indexOf() 实现自定义比较，最终再将排序后的键值对重构回新对象，我们可以有效地实现对JavaScript对象键的自定义排序。理解每一步操作的原理，并注意潜在的性能问题和边界情况，将帮助你更专业地运用这一技术。在需要严格顺序的场景下，优先考虑使用数组，但此方法为特定需求提供了灵活的解决方案。
