JavaScript中按指定数组顺序对对象键进行排序的实现与解析-js教程-PHP中文网

JavaScript中按指定数组顺序对对象键进行排序的实现与解析

本文详细解析了如何利用JavaScript将一个对象的键值对按照预设的数组顺序进行重新排序。通过结合使用Object.entries、Map、Array.from、数组的sort方法与自定义比较函数，以及Object.fromEntries，实现对对象键的有序重构，从而满足特定场景下对数据展示或处理的顺序要求。

理解JavaScript对象的键序与排序需求

在javascript中，传统的对象（{}）在ecmascript 2015（es6）之前，其属性的顺序是不保证的。虽然现代javascript引擎通常会保留字符串键的插入顺序，但为了确保跨环境的一致性和明确的排序逻辑，我们不能完全依赖这种行为。当我们需要按照一个特定的、预定义的顺序来处理或展示对象的键时，就需要一种机制来强制这种排序。

本教程将深入探讨一个常见的需求：根据一个参考数组的顺序，对一个JavaScript对象的键进行重新排列。这并不是真正意义上的“排序对象”本身，因为对象作为无序键值对的集合，其内部存储通常不具备“排序”的概念，我们实际操作的是其键的展示顺序。

核心实现：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',
// }
*/

登录后复制

这个sortWeekFunction函数通过一系列巧妙的步骤实现了对对象键的排序。下面我们分步解析其工作原理。

步骤一：将对象转换为可排序的数组结构

首先，函数接收一个参考数组array（例如weeksArr）和一个待排序的对象object（例如weeksObj）。

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

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

登录后复制

Object.entries(object): 这一步是关键的起点。它将一个对象转换为一个包含其所有可枚举字符串属性的[key, value]对数组。对于weeksObj，Object.entries(weeksObj)将生成：
```
[
  ['wednesday', 'wednesday'],
  ['friday', 'friday'],
  ['monday', 'monday'],
  ['thursday', 'thursday'],
  ['sunday', 'sunday']
]
```
登录后复制
请注意，此时这个数组的顺序仍然是基于原始对象的键插入顺序（在现代引擎中），尚未进行我们期望的排序。
new Map(...): 接着，这个[key, value]对数组被用来初始化一个新的Map对象。Map是一种键值对集合，与对象类似，但它保留了键的插入顺序，并且可以使用任意类型的值作为键。在这个特定的场景中，Map的创建主要是为了下一步能够方便地使用Array.from()将其转换为数组。
Array.from(newMapSortObj): Array.from()方法可以从一个类数组对象或可迭代对象（如Map）创建一个新的Array实例。这一步将Map转换回一个[key, value]对的数组。转换后的数组结构与Object.entries()的输出类似：
```
[
  ['wednesday', 'wednesday'],
  ['friday', 'friday'],
  ['monday', 'monday'],
  ['thursday', 'thursday'],
  ['sunday', 'sunday']
]
```
登录后复制
这个数组现在是可排序的，因为它是一个真正的JavaScript数组，拥有sort()方法。

步骤二：使用自定义比较函数对数组进行排序

接下来，我们对上一步得到的数组进行排序：

const sortObj = Array.from(newMapSortObj)?.sort(
  (a, b) => array.indexOf(a[0]) - array.indexOf(b[0])
);

登录后复制

?.sort(...): sort()是JavaScript数组的一个方法，用于对数组的元素进行原地排序并返回数组。这里的?.是可选链操作符，确保在Array.from(newMapSortObj)返回null或undefined时不会报错（尽管在此场景下不太可能）。
自定义比较函数 (a, b) => array.indexOf(a[0]) - array.indexOf(b[0]): 这是实现排序逻辑的核心。

ListenLeap
AI辅助通过播客学英语

101

查看详情
- sort()方法在排序时会比较数组中的两个元素a和b。在这里，a和b都是[key, value]形式的数组（例如['wednesday', 'wednesday']）。
- a[0]和b[0]分别代表当前比较元素的键（例如'wednesday'和'sunday'）。
- array.indexOf(a[0])：在参考数组weeksArr中查找a[0]（键）的索引。例如，weeksArr.indexOf('sunday')将返回0，weeksArr.indexOf('wednesday')将返回2。
- 比较函数的工作原理：
  - 如果返回值为负数（array.indexOf(a[0]) - array.indexOf(b[0]) < 0），则a应排在b之前。
  - 如果返回值为正数（array.indexOf(a[0]) - array.indexOf(b[0]) > 0），则b应排在a之前。
  - 如果返回值为零，则a和b的相对顺序不变。
举例说明： 假设a是['sunday', 'sunday']，b是['wednesday', 'wednesday']。 array.indexOf(a[0]) (即weeksArr.indexOf('sunday')) 返回 0。 array.indexOf(b[0]) (即weeksArr.indexOf('wednesday')) 返回 2。比较结果是 0 - 2 = -2。因为结果是负数，所以a（'sunday'）会被排在b（'wednesday'）之前，这符合weeksArr中的顺序。

经过这一步，sortObj将是一个按照weeksArr中键的顺序排列的[key, value]对数组：

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

登录后复制

步骤三：将排序后的数组转换回对象

最后一步是将排序后的[key, value]对数组重新组合成一个对象：

return Object.fromEntries(sortObj);

登录后复制

Object.fromEntries()是一个静态方法，它执行Object.entries()的逆操作，将一个[key, value]对的数组转换为一个新对象。由于sortObj中的键值对已经按照我们期望的顺序排列，Object.fromEntries()会创建一个新对象，其键的顺序与sortObj中的顺序一致。

最终返回的对象将是：

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

登录后复制

完整示例代码

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

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

/**
 * 根据参考数组的顺序对对象的键进行排序并返回新对象
 * @param {string[]} array - 包含期望键顺序的数组
 * @param {Object} object - 待排序的对象
 * @returns {Object} - 键已按指定顺序排序的新对象
 */
const sortWeekFunction = (array, object) => {
  // 1. 将对象转换为 [key, value] 对的数组
  //    使用 Map 构造函数和 Array.from 确保能得到一个可排序的数组
  const objectEntries = Object.entries(object);
  const mapFromEntries = new Map(objectEntries);
  const entriesArray = Array.from(mapFromEntries);

  // 2. 对 [key, value] 对数组进行排序
  //    排序逻辑基于参考数组中键的索引
  const sortedEntries = entriesArray.sort(
    (a, b) => {
      const indexA = array.indexOf(a[0]); // 获取键 a 在参考数组中的索引
      const indexB = array.indexOf(b[0]); // 获取键 b 在参考数组中的索引

      // 如果键不在参考数组中，indexOf 返回 -1。
      // 为了避免 -1 导致其排在最前面，可以根据需求调整逻辑。
      // 这里假设所有键都在参考数组中，或者 -1 意味着排在最前。
      return indexA - indexB;
    }
  );

  // 3. 将排序后的 [key, value] 对数组转换回新对象
  return Object.fromEntries(sortedEntries);
};

console.log('原始对象:', weeksObj);
console.log('参考数组:', weeksArr);
console.log('排序后的对象:', sortWeekFunction(weeksArr, weeksObj));

// 示例2: 键不在参考数组中的情况
const monthsArr = ['jan', 'feb', 'mar'];
const monthsObj = {
  mar: 3,
  apr: 4, // 'apr' 不在 monthsArr 中
  jan: 1,
  feb: 2,
};

console.log('\n--- 示例2：包含未定义键 ---');
console.log('原始对象:', monthsObj);
console.log('参考数组:', monthsArr);
console.log('排序后的对象:', sortWeekFunction(monthsArr, monthsObj));
/*
// 预期输出：
// {
//     apr: 4, // 'apr' 的 indexOf 为 -1，因此排在最前面
//     jan: 1,
//     feb: 2,
//     mar: 3
// }
*/

登录后复制

注意事项与优化

Map的使用并非强制: 在现代JavaScript环境中，Object.entries()返回的数组可以直接用于sort()。new Map(Object.entries(object)) 和 Array.from(newMapSortObj) 这两步可以简化为直接对Object.entries(object)的结果进行排序。例如：
```
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.prototype.indexOf()在大型数组中进行频繁查找时，性能开销会比较大，因为它需要遍历数组直到找到匹配项。如果array（参考顺序数组）非常大，并且对象中的键很多，每次比较都调用indexOf会导致效率低下。 优化方案: 可以预先将参考数组转换为一个Map或Object，用于快速查找键的索引。

const sortWeekFunctionOptimizedPerformance = (array, object) => {
  // 预先创建键到索引的映射，提高查找效率
  const keyIndexMap = new Map(array.map((key, index) => [key, index]));

  const sortObj = Object.entries(object).sort(
    (a, b) => {
      const indexA = keyIndexMap.get(a[0]);
      const indexB = keyIndexMap.get(b[0]);

      // 处理键不存在于参考数组中的情况
      // 如果键不存在，keyIndexMap.get() 返回 undefined。
      // 可以选择将其排在最前、最后，或保持原有相对顺序。
      // 这里将 undefined 视为一个非常大的值，使其排在最后。
      const valA = indexA === undefined ? Infinity : indexA;
      const valB = indexB === undefined ? Infinity : indexB;

      return valA - valB;
    }
  );
  return Object.fromEntries(sortObj);
};

console.log('\n--- 示例3：性能优化及键处理 ---');
console.log('原始对象:', monthsObj);
console.log('参考数组:', monthsArr);
console.log('排序后的对象 (优化版):', sortWeekFunctionOptimizedPerformance(monthsArr, monthsObj));
/*
// 预期输出：
// {
//     jan: 1,
//     feb: 2,
//     mar: 3,
//     apr: 4 // 'apr' 不在 monthsArr 中，排在最后
// }
*/

登录后复制

在上述优化方案中，keyIndexMap.get()的平均时间复杂度为O(1)，相比indexOf的O(n)有显著提升。

处理未在参考数组中的键: 如果对象中存在某些键，但它们并未出现在array（参考顺序数组）中，那么array.indexOf()将返回-1。在比较函数中，-1通常会导致这些键被排在最前面。根据具体需求，你可能需要调整比较逻辑，例如将这些键排在最后，或者保持其在原始对象中的相对顺序。
数据结构选择: 尽管上述方法可以实现对对象键的排序，但如果你的核心需求是维护一个有序的键值对集合，那么Map数据结构本身就是更好的选择，因为它天然地保留了插入顺序。如果需要更复杂的排序，或者要频繁地进行排序操作，那么使用一个包含对象的数组（例如[{ key: 'sunday', value: 'sunday' }, ...]）可能更合适，因为数组的排序功能更加强大和灵活。

总结

通过将对象转换为[key, value]对数组，利用数组的sort()方法和自定义比较函数（基于参考数组的索引），再将排序后的数组转换回对象，我们可以有效地控制JavaScript对象的键的顺序。理解这一过程不仅有助于解决特定的排序需求，也加深了对JavaScript中对象、数组和Map数据结构之间转换与操作的理解。在实际应用中，根据数据规模和性能要求，选择合适的优化策略（如预构建索引映射）是至关重要的。

以上就是JavaScript中按指定数组顺序对对象键进行排序的实现与解析的详细内容，更多请关注php中文网其它相关文章！