按键对 JavaScript 对象数组进行排序

对象数组排序是处理列表数据（如用户记录、产品或任何对象集合）时使用的一种方法。在 JavaScript 中，数组通常包含对象，并按对象的某个属性（如姓名、年龄等）对这些数组进行排序，可以使数据以有意义的顺序进行访问或处理。在本文中，我们将了解按键对对象数组进行排序的基本信息，如技术、示例等。

什么是对象数组？

由项组成的列表或数组，其中每个元素都是一个具有其属性和键值对的对象，称为对象数组。例如：

在此代码中，users 是一个对象，每个对象代表一个用户，该用户拥有自己分配的姓名和年龄。

为什么按键排序对象数组？

在 JavaScript 中按键排序对象数组很重要，因为它有助于有意义地组织数据，增强用户体验，并使 Web 应用程序中的数据操作和显示更加有效。

• 组织数据：排序确保包含的数据（如用户详细信息、产品和信息）以逻辑顺序显示，即按姓名字母顺序或按日期时间顺序。
• 启用功能：许多应用程序的功能，如过滤、分组、显示排名或构建动态界面，都依赖于有序数据。
• 高效的数据处理：按键排序数组可以简化许多编程任务，如搜索项目，尤其是在二分查找的情况下，检测重复项，或选择最高或最低的元素。
• 展示一致性：一致的排序可确保在重新渲染或从 API 获取数据时，界面不会因不可预测的顺序而让用户感到惊讶。
• 更好的用户体验：对对象数组进行排序有助于用户轻松使用和理解数据。用户可以与排序后的数据进行交互，从而增强他们的体验。

排序技术

在 JavaScript 中，可以使用多种技术按键对对象数组进行排序，每种技术都适合不同的场景和需求。以下是主要方法，包括内置函数、手动算法和实用库。让我们通过一些示例了解更多关于它们的信息。

使用 sort() 方法

在此方法中，我们将使用 sort() 方法以及自定义比较函数，该函数使用 localeCompare() 方法比较对象的 name 属性，从而确保数组将根据 name 键按字母顺序排序。

语法

示例

以下示例在 JavaScript 数组的对象上应用 sort() 方法，基于一个键。

输出

[
  { name: 'Functions', topic: 'Mathematical Problems' },
  { name: 'Lion', topic: 'Animal Species' },
  { name: 'Python', topic: 'Programming' }
]

使用自定义排序函数

在此示例中，我们使用了自定义排序函数，该函数循环遍历数组并使用 swap 方法使用 localeCompare() 方法比较属性，直到过程完成。

语法

输出

[
  { name: 'Functions', topic: 'Mathematical Problems' },
  { name: 'Lion', topic: 'Animal Species' },
  { name: 'Python', topic: 'Programming' }
]

使用 Lodash _.orderBy() 方法

在此方法中，我们正在使用 Lodash _.orderBy() 方法。如果未指定，则所有值都将按升序排序；否则，相应值的顺序指示顺序，这意味着desc 表示降序排序，asc 表示升序排序。

语法

示例

以下示例演示了如何使用 Lodash _.orderBy() 方法在 JavaScript 中按键对对象数组进行排序。

输出

[
  { name: 'Functions', topic: 'Mathematical Problems' },
  { name: 'Lion', topic: 'Animal Species' },
  { name: 'Python', topic: 'Programming' }
]

使用 Intl.Collator

Intl.Collator 对象是 collator 的构造函数，collator 是使语言敏感的字符串区分变得容易的对象。此方法利用了更高级的排序选项，例如区分大小写和本地语言规则。

语法

示例

以下示例使用 Intl.Collator 在 JavaScript 中按键对对象数组进行排序。

输出

[
  { name: 'Functions', topic: 'Mathematical Problems' },
  { name: 'Lion', topic: 'Animal Species' },
  { name: 'Python', topic: 'Programming' }
]

按键排序对象数组的优点

排序对象数组有很多好处。其中一些是：

提高可读性和用户体验

与未存储的数据相比，存储的数据（如用户界面中的数据）更容易阅读和理解。按照您想要的任何“键”以一致的排序“顺序”呈现列表、表格或搜索结果，用户体验会更好。例如，按姓名字母顺序、按日期时间顺序、按 ID 升序或降序排序等。

高效的数据检索和搜索

虽然排序本身并不能提供更快的查找速度，但排序可以实现更好的人工扫描或顺序处理单个项目，以搜索特定项目。例如，如果用户在已排序列表中搜索某个项目，用户可以快速找到该项目。

简化的比较和分析

当对象根据共享键进行组织时，比较等任务变得微不足道。例如，查找重复项、查找最小值或范围查询等任务都利用了此技术。

一致的数据呈现

排序可确保每次显示数据时，数据都以频繁、可预测的方式呈现。这种一致性对于应用程序的专业性和可预测性至关重要。

算法支持

许多算法（例如，许多搜索算法和合并算法）都依赖于排序的输入数据来提高操作效率。

调试和开发

排序数据可以在开发过程中帮助定位错误，验证数据完整性，甚至帮助理解数据在应用程序中的移动。

按键排序对象数组的缺点

除了优点之外，此技术也包含一些缺点。其中一些是：

修改原始数组

Array.prototype.sort() 方法直接在数组上进行原地修改。如果您希望在应用程序的其他位置保留数组的原始顺序，或者您正在寻找基于不同键的多个排序数组，您必须首先使用 slice() 或 展开运算符 (...) 或任何其他方法创建数组的副本。如果您跳过此步骤，可能会遇到意外的副作用，并可能遇到错误。

计算成本

对于大型数据集，排序算法的成本可能很高。此成本的程度最终取决于算法所需的计算时间（通常是 O(n log n) 的 归并排序，O(n log n) 的 快速排序，O(n^2) 的 冒泡排序，O(n^2) 的 插入排序 在“最坏情况”下）。排序还会对数组上执行的一系列操作产生成本。

内存使用

此外，某些排序算法（如归并排序）需要额外的内存空间来执行排序。随着数据集的增大，或者当内存资源有限/非常稀缺时，您可能会发现某些算法的额外内存成本太高，无法与时间成本一起承担。

比较逻辑的复杂性

当我们想对自定义对象进行排序时，我们需要根据创建比较器逻辑时选择的键来定义和实现某种比较逻辑。这可能意味着定义一个 Comparator 接口或仅提供一个比较函数，因此您可以看到这会使代码复杂化。当处理多条件排序或键中的对象更复杂时，这会增加代码复杂性。

已排序和接近排序数据的性能

虽然有些排序算法在接近排序的数据上表现良好（如 插入排序）并且能极大地受益于已排序的数据，但也有其他排序算法（如使用朴素枢轴选择的快速排序）通常在随机排序的数据上表现良好，但在已排序或接近排序的数据上性能会下降，并将其推至最坏情况。

对未来活动的影响

如果数组经常被修改（例如，插入、删除），那么在每次修改后重新排序的开销可能效率低下。数组的排序顺序会随着频繁的修改而变得复杂，而更适合在频繁修改时维护排序顺序的数据结构是那些有效地支持有序操作的数据结构，例如平衡二叉搜索树（B 树、红黑树）。

结论

理论上，按键对对象数组进行排序可以实现有组织、合乎逻辑且高效的数据管理；它将一个混乱的对象数组转化为一个有序的对象列表，在该列表中，查找、过滤、比较或分组总是可预测的。排序带来的价值不仅仅是计算优势，例如实现更快的 搜索算法 或更快的合并。排序提供了清晰的数据访问，就像在书架上或文件柜中整理书籍一样。

当对象通过唯一键（如 ID 号或时间戳）唯一标识时，这些对象仅基于该唯一键就具有可识别、一致且有序的排列。因此，在识别对象时不仅歧义更少，重复也更少，处理公平性的机会也更大。另一点需要注意的是，信息的组织方式（因为这主要基于人类经验），按顺序排列事物会改变用户体验，以适应我们对更易识别、有序且随后按搜索顺序排列的信息的自然偏好。

排序的价值不仅仅在于更快的计算速度。它允许将原始数据转换为有意义的信息，并便于人类和机器与信息交互，从而得出意义。总的来说，可以认为按键排序是整理混乱的一种方式，或者至少允许数据以最简单、最有条理的方式自行表达。

常见问题解答 (FAQs)

1. JavaScript 中的对象数组是什么？

由项组成的列表，其中每个现有元素都是一个具有键值对的对象，称为对象数组。例如：

在这里，users 对象有各自不同的姓名和年龄。

2. 如何按数字键对对象数组进行排序？

要按数字键对对象数组进行排序，您必须使用带有比较函数的 .sort() 方法。这将为您提供所需的结果。

3. 如何使用多个键对对象数组进行排序？

要使用多个键来排序函数，您必须在比较函数中使用一个平局打破器。

示例

此代码将帮助您比较特定特征（如年龄），然后根据给定条件进行排序。

输出

[
  { name: 'Alex', age: 22 },
  { name: 'Drake', age: 25 },
  { name: 'Harry', age: 25 }
]

4. .sort() 会修改原始数组吗？

是的，Array.prototype.sort() 会就地对数组进行排序，因此它会直接修改原始数组。如果您想在保留原始数组不变的情况下获得一个新的已排序数组，可以使用 slice() 创建一个浅拷贝并对其进行排序。

5. 我可以按多个键排序吗？

是的，您可以在比较函数中进行二次排序。当您的主要键的值相等时，您可以比较您的次要键。示例：

我们按 ID 排序，然后按姓名排序。

输出

[ { id: 1, name: 'A' }, { id: 1, name: 'B' }, { id: 2, name: 'A' } ]