JavaScript数组对象排序技巧

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript如何按数组排序对象键》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

本文详细阐述了在JavaScript中如何利用一个参照数组来对对象的键进行排序。通过分析一个具体的函数实现，我们将逐步解析其内部机制，包括如何将对象转换为可排序的键值对数组，如何利用Array.prototype.sort()方法结合参照数组进行自定义排序，以及最终如何将排序后的键值对重新组合成一个新对象。文章还将探讨相关数据结构的选择和性能考量。

在JavaScript中，虽然对象（Object）本身通常不保证键的顺序（尽管现代引擎对非数字键通常会保留插入顺序），但在某些场景下，我们可能需要根据特定的逻辑来“排序”对象的键。这通常意味着创建一个新的对象，其键的顺序符合我们的要求。以下我们将通过一个具体的函数sortWeekFunction来深入理解这一过程。

核心概念：排序对象的键

首先需要明确，“排序一个对象”的本质是排序该对象的键。JavaScript中的对象（Object）和映射（Map）是不同的数据结构。对象通常不被视为有序集合，而Map则会保留键的插入顺序。当我们需要对对象的键进行排序时，通常会涉及以下步骤：

1. 将对象的键值对提取出来。
2. 对这些键值对进行排序。
3. 根据排序后的键值对重新构建一个新的对象。

示例代码解析

我们来看一个具体的例子，该函数旨在根据一个参照数组weeksArr的顺序来排序weeksObj的键。

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

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

const sortWeekFunction = (array, object) => {
  // 步骤1: 将对象转换为键值对数组
  // Object.entries(object) 返回一个数组，其中包含对象所有可枚举的字符串键属性的 [key, value] 对。
  // new Map(...) 从这个键值对数组创建一个 Map 对象。
  // Array.from(newMapSortObj) 将 Map 对象转换为一个数组，其元素是 [key, value] 对。
  // 这一步实际上等同于直接使用 Array.from(Object.entries(object))，因为 Map 在这里主要用于中间转换。
  const newMapSortObj = new Map(Object.entries(object));
  const entriesArray = Array.from(newMapSortObj);

  /*
  此时 entriesArray 的内容大致如下（顺序可能不固定，取决于原始对象的插入顺序）：
  [
    ['wednesday', 'wednesday'],
    ['friday', 'friday'],
    ['monday', 'monday'],
    ['thursday', 'thursday'],
    ['sunday', 'sunday']
  ]
  */

  // 步骤2: 对键值对数组进行排序
  // 使用 Array.prototype.sort() 方法，并提供一个自定义的比较函数。
  const sortObj = entriesArray.sort(
    (a, b) => array.indexOf(a[0]) - array.indexOf(b[0])
  );
  /*
  比较函数的逻辑：
  - a 和 b 是 entriesArray 中的两个元素，例如 a = ['wednesday', 'wednesday']，b = ['sunday', 'sunday']。
  - a[0] 和 b[0] 分别是键，即 'wednesday' 和 'sunday'。
  - array.indexOf(a[0]) 查找键在参照数组 `weeksArr` 中的索引。
    - weeksArr.indexOf('sunday') 返回 0。
    - weeksArr.indexOf('monday') 返回 1。
    - weeksArr.indexOf('wednesday') 返回 2。
    - weeksArr.indexOf('thursday') 返回 3。
    - weeksArr.indexOf('friday') 返回 4。
  - 比较结果：
    - 如果 `array.indexOf(a[0]) - array.indexOf(b[0])` 为负值，表示 `a` 应该排在 `b` 之前。
    - 如果为正值，表示 `b` 应该排在 `a` 之前。
    - 如果为零，表示相对顺序不变。

  例如，比较 ['sunday', ...] 和 ['wednesday', ...]:
  array.indexOf('sunday') (0) - array.indexOf('wednesday') (2) = -2。
  因为结果是负数，所以 ['sunday', ...] 会排在 ['wednesday', ...] 之前。
  通过这种方式，数组最终会按照 `weeksArr` 的顺序排列。
  */

  // 步骤3: 将排序后的键值对数组重新转换为对象
  // Object.fromEntries() 方法接收一个由键值对组成的数组，并返回一个新对象。
  return Object.fromEntries(sortObj);
};

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

工作原理总结

1. 提取键值对： Object.entries(object) 将原始对象转换为一个包含所有键值对的数组，例如 [['key1', 'value1'], ['key2', 'value2']]。
2. 转换为可排序结构： 虽然示例中使用了 new Map() 和 Array.from()，但更直接的方式是直接对 Object.entries(object) 返回的数组进行操作，因为它本身就是一个可排序的数组。
3. 自定义排序： Array.prototype.sort() 方法被用来对键值对数组进行排序。其核心在于比较函数 (a, b) => array.indexOf(a[0]) - array.indexOf(b[0])。这个函数通过查找每个键（a[0]或b[0])在参照数组array中的位置来决定它们的相对顺序。键在参照数组中位置越靠前，其索引值越小，在排序后的结果中也会越靠前。
4. 重构对象： Object.fromEntries(sortObj) 将排序后的键值对数组转换回一个新的对象。这个新对象的键的顺序将与参照数组的顺序一致。

注意事项与性能考量

1. 对象的键序： 尽管此方法可以生成一个键有序的新对象，但请记住，在大多数情况下，JavaScript普通对象的键顺序在语义上并不重要。如果你的应用逻辑严格依赖于键的顺序，Map数据结构可能是更合适的选择，因为它明确保证了键的插入顺序。

2. indexOf的性能： 在排序函数的比较逻辑中频繁调用 array.indexOf() 可能会导致性能问题，尤其是在参照数组array非常大或者需要排序的对象键非常多的情况下。indexOf方法每次调用都需要遍历参照数组来查找元素，这在sort的O(N log N)复杂度中又引入了一个O(M)的复杂度（M为参照数组长度），使得总复杂度变为O(N log N * M)。

   • 优化建议： 如果性能是一个关键因素，可以考虑在排序之前创建一个从键到其在参照数组中索引的映射（例如，使用一个Map或另一个对象），这样在比较函数中查找索引就变成了O(1)操作，从而将总复杂度降低到O(N log N)。

   const sortWeekFunctionOptimized = (array, object) => {
     const keyToIndexMap = new Map();
     array.forEach((key, index) => {
       keyToIndexMap.set(key, index);
     });
   
     const entriesArray = Object.entries(object);
   
     const sortObj = entriesArray.sort(
       (a, b) => (keyToIndexMap.get(a[0]) || Infinity) - (keyToIndexMap.get(b[0]) || Infinity)
     );
     // 使用 || Infinity 是为了处理对象中存在但参照数组中不存在的键，确保它们排在最后。
   
     return Object.fromEntries(sortObj);
   };

3. 键的缺失： 如果对象中存在某个键，但在参照数组中不存在，那么 array.indexOf() 将返回 -1。这会导致这些键在排序结果中被排到最前面（因为 -1 是最小的索引值）。根据需求，你可能需要调整比较函数来处理这种情况，例如将它们排到最后。

总结

通过上述解析，我们理解了如何利用JavaScript的数组和对象方法，结合自定义排序逻辑，实现根据参照数组对对象键进行排序的功能。这种技术在需要特定数据展示顺序或处理配置对象时非常有用。同时，我们也强调了性能优化的重要性，特别是在处理大量数据时，预先构建索引映射可以显著提升效率。

理论要掌握，实操不能落！以上关于《JavaScript数组对象排序技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！