JavaScript排序优化技巧与实现方法

一分耕耘，一分收获！既然打开了这篇文章《JavaScript排序函数实现与优化技巧》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

本教程旨在解决JavaScript中重复排序逻辑的问题，通过引入一个通用的`sortBy`函数来优化代码结构。该函数利用“键提取”思想，允许开发者传入一个函数来指定排序依据，从而将多个相似的排序操作（如按字符串、数字或日期排序）整合为一个可重用的模块，显著提升代码的简洁性、可维护性和扩展性。

优化重复的排序逻辑

在开发Web应用时，数据排序是一个常见需求。例如，在一个待办事项列表中，用户可能需要按标题字母顺序、截止日期或优先级进行排序。通常，初学者可能会为每种排序类型编写一个独立的函数，导致代码中存在大量相似甚至重复的逻辑。

考虑以下三个独立的排序函数示例：一个按标题排序（字符串），另两个分别按日期和优先级排序（数字）。

// 按标题字母顺序排序
function sortTitle(array) {
  return array.sort((a, b) => {
    const titleA = a.title.toUpperCase();
    const titleB = b.title.toUpperCase();
    if (titleA > titleB) return 1;
    if (titleA < titleB) return -1;
    return 0;
  });
}

// 按截止日期排序
function sortDate(array) {
  return array.sort((a, b) => {
    if (a.duedate > b.duedate) return 1;
    if (a.duedate < b.duedate) return -1;
    return 0;
  });
}

// 按优先级排序
function sortPrio(array) {
  return array.sort((a, b) => {
    if (a.prio > b.prio) return 1;
    if (a.prio < b.prio) return -1;
    return 0;
  });
}

这些函数虽然功能不同，但其核心逻辑——即获取对象中的某个属性并进行比较——是高度相似的。这种重复不仅增加了代码量，也使得后续的维护和功能扩展变得复杂。为了遵循DRY（Don't Repeat Yourself）原则，我们可以设计一个更加通用的排序函数。

通用排序函数的设计理念

解决上述重复问题的关键在于将“如何获取用于比较的值”这一逻辑抽象出来，作为参数传递给一个通用排序函数。这种技术被称为“Schwartzian transform”的变体，其核心思想是：

1. 提取键值： 遍历数组中的每个元素，并使用一个“键提取函数”（keyFn）从每个元素中提取出用于排序的实际值（键）。
2. 创建键值对： 将原始元素与提取出的键值组合成一个临时结构（例如 [key, originalItem]）。
3. 按键排序： 对这些临时结构组成的列表进行排序，排序的依据是第一步提取出的键值。
4. 还原原始元素： 排序完成后，从临时结构中提取出原始元素，形成最终的排序结果。

通过这种方式，排序逻辑变得通用，而具体的排序依据则由外部提供的keyFn决定。

实现一个灵活的 sortBy 函数

基于上述设计理念，我们可以实现一个简洁而强大的sortBy函数：

/**
 * 通用排序函数，根据指定的键函数对数组进行排序。
 * @param {Array