本文旨在探讨如何在javascript中优化重复的排序逻辑。针对多属性排序场景，通过引入一个高阶通用排序函数，结合“键提取”思想，实现代码复用和逻辑简化。文章将详细介绍这种通用排序函数的设计原理、实现方式及其在处理不同数据类型（如字符串、数字、日期）时的应用，并提供示例代码和使用注意事项，帮助开发者编写更灵活、可维护的排序代码。
现有排序逻辑分析与优化必要性
在前端开发中，对列表数据进行排序是常见的需求。然而，当需要根据对象的不同属性（如标题、日期、优先级等）进行排序时，我们可能会编写多个结构相似但仅比较属性不同的排序函数。例如，以下是针对待办事项列表（todos）分别按标题、日期和优先级排序的函数：
// 按标题排序（字符串，不区分大小写） function sortTitle(Array) { return array.sort((a, b) => { const titleA = a.title.toUpperCase(); const titleB = b.title.toUpperCase(); let comparison = 0; if (titleA > titleB) { comparison = 1; } else if (titleA < titleB) { comparison = -1; } return comparison; }); } // 按日期排序（数字或日期对象） function sortDate(array) { return array.sort((a, b) => { let comparison = 0; if (a.duedate > b.duedate) { comparison = 1; } else if (a.duedate < b.duedate) { comparison = -1; } return comparison; }); } // 按优先级排序（数字） function sortPrio(array) { return array.sort((a, b) => { let comparison = 0; if (a.prio > b.prio) { comparison = 1; } else if (a.prio < b.prio) { comparison = -1; } return comparison; }); }
上述代码中，sortTitle、sortDate 和 sortPrio 函数的核心逻辑高度重复，它们都围绕 Array.prototype.sort() 方法展开，区别仅在于比较的是对象的哪个属性以及是否需要进行预处理（如 toUpperCase()）。这种重复代码不仅增加了维护成本，也降低了代码的灵活性和可读性。因此，我们需要一种更通用的解决方案来合并这些相似的排序逻辑。
通用排序函数设计理念
为了解决上述问题，我们可以设计一个高阶函数，它接受待排序的数组和一个“键提取函数”（keyFn）。keyFn 的作用是从数组的每个复杂元素中提取出一个可直接比较的标量值（如字符串、数字），然后通用排序函数将基于这些提取出的键值进行排序。这种方法被称为“Schwartzian 变换”的简化版，其核心思想是：
- 键值映射： 遍历数组，对每个元素应用 keyFn，生成一个包含 [键值, 原始元素] 对的临时列表。
- 基于键值排序： 对这个临时列表进行排序，排序依据是其中的键值。
- 还原原始元素： 遍历排序后的临时列表，提取出原始元素，形成最终的排序结果。
这种方法的好处在于，它将“如何获取用于比较的值”的逻辑（由 keyFn 决定）与“如何进行比较和重排”的通用逻辑分离，极大地提高了代码的复用性。
立即学习“Java免费学习笔记（深入）”；
实现通用排序函数
根据上述设计理念，我们可以实现一个名为 sortBy 的通用排序函数：
/** * 通用排序函数，根据提供的键提取函数对数组进行排序。 * @param {Array<Object>} ary - 待排序的数组。 * @param {Function} keyFn - 键提取函数，接受一个数组元素并返回用于排序的键值。 * @returns {Array<Object>} 排序后的新数组。 */ const sortBy = (ary, keyFn) => ary // 步骤1: 映射原始元素为 [键值, 原始元素] 对 .map(item => [keyFn(item), item]) // 步骤2: 根据键值进行排序 // 这里的比较函数 (a[0] > b[0]) - (a[0] < b[0]) 是一种简洁的写法， // 当 a[0] > b[0] 返回 1，a[0] < b[0] 返回 -1，a[0] == b[0] 返回 0。 // 适用于数字和字符串的升序比较。 .sort((a, b) => (a[0] > b[0]) - (a[0] < b[0])) // 步骤3: 从排序后的对中提取原始元素 .map(pair => pair[1]);
代码解析：
- sortBy 函数接收两个参数：ary (要排序的数组) 和 keyFn (一个函数，用于从数组的每个元素中提取出排序的关键值)。
- ary.map(item => [keyFn(item), item])：这一步创建了一个新的数组，新数组的每个元素都是一个包含 [键值, 原始对象] 的二元组。keyFn(item) 负责从 item 中提取出用于排序的值。
- .sort((a, b) => (a[0] > b[0]) – (a[0] < b[0]))：对上一步生成的二元组数组进行排序。排序的依据是二元组的第一个元素（即键值）。(a[0] > b[0]) – (a[0] < b[0]) 是一个简洁的比较函数，它能正确处理数字和字符串的升序比较。
- 如果 a[0] 大于 b[0]，结果为 1 – 0 = 1。
- 如果 a[0] 小于 b[0]，结果为 0 – 1 = -1。
- 如果 a[0] 等于 b[0]，结果为 0 – 0 = 0。
- .map(pair => pair[1])：最后一步，从排序后的二元组中取出原始对象（二元组的第二个元素），从而得到一个完全排序好的新数组。
使用示例
假设我们有以下待办事项数据：
let todos = [ {id: 1, title: 'Learn javaScript', duedate: 9, prio: 2}, {id: 2, title: 'Build Todo app', duedate: 8, prio: 1}, {id: 3, title: 'Refactor Code', duedate: 7, prio: 3}, {id: 4, title: 'Write Tests', duedate: 6, prio: 2}, {id: 5, title: 'Deploy Application', duedate: 5, prio: 1}, ];
现在，我们可以使用 sortBy 函数来灵活地对 todos 数组进行排序：
// 1. 按标题（字符串，不区分大小写）升序排序 console.log('--- 按标题升序排序 ---'); const sortedByTitle = sortBy(todos, item => item.title.toUpperCase()); console.log(sortedByTitle); /* [ { id: 5, title: 'Deploy Application', duedate: 5, prio: 1 }, { id: 2, title: 'Build Todo App', duedate: 8, prio: 1 }, { id: 1, title: 'Learn javascript', duedate: 9, prio: 2 }, { id: 3, title: 'Refactor Code', duedate: 7, prio: 3 }, { id: 4, title: 'Write Tests', duedate: 6, prio: 2 } ] */ // 2. 按截止日期（数字）升序排序 console.log('n--- 按截止日期升序排序 ---'); const sortedByDuedate = sortBy(todos, item => item.duedate); console.log(sortedByDuedate); /* [ { id: 5, title: 'Deploy Application', duedate: 5, prio: 1 }, { id: 4, title: 'Write Tests', duedate: 6, prio: 2 }, { id: 3, title: 'Refactor Code', duedate: 7, prio: 3 }, { id: 2, title: 'Build Todo App', duedate: 8, prio: 1 }, { id: 1, title: 'Learn JavaScript', duedate: 9, prio: 2 } ] */ // 3. 按优先级（数字）升序排序 console.log('n--- 按优先级升序排序 ---'); const sortedByPrio = sortBy(todos, item => item.prio); console.log(sortedByPrio); /* [ { id: 2, title: 'Build Todo App', duedate: 8, prio: 1 }, { id: 5, title: 'Deploy Application', duedate: 5, prio: 1 }, { id: 1, title: 'Learn JavaScript', duedate: 9, prio: 2 }, { id: 4, title: 'Write Tests', duedate: 6, prio: 2 }, { id: 3, title: 'Refactor Code', duedate: 7, prio: 3 } ] */
通过这种方式，我们只需一个 sortBy 函数，就能根据不同的 keyFn 实现多种排序需求，极大地简化了代码。
注意事项与最佳实践
-
降序排序： 如果需要降序排序，可以修改 keyFn 返回值的符号（针对数字），或者在最终 map 之后使用 reverse() 方法。
- 数字降序：sortBy(todos, item => -item.duedate)
- 通用降序：sortBy(todos, item => item.duedate).reverse()
-
字符串国际化排序： 对于包含非英文字符的字符串排序，直接使用 > 和 < 运算符可能不准确。此时，keyFn 可以返回 item.title.localeCompare() 的结果，或者在 sort 内部使用 localeCompare。
// 如果 keyFn 返回字符串，可以直接在 sort 函数中用 localeCompare const sortByLocale = (ary, keyFn) => ary .map(item => [keyFn(item), item]) .sort((a, b) => a[0].localeCompare(b[0])) // 使用 localeCompare .map(pair => pair[1]); // 使用示例： // sortByLocale(todos, item => item.title);
-
性能考量： Schwartzian 变换会创建两个中间数组（map 和 sort 步骤各一个），这会增加内存开销。对于小型数组，这通常不是问题。但对于非常大的数据集，如果性能是关键因素，可能需要权衡。在大多数UI场景中，这种开销是可接受的。
-
处理空值或 undefined： keyFn 应该能够健壮地处理可能不存在的属性值，例如返回一个默认值或通过可选链操作符 ?. 避免错误。
// 示例：处理可能不存在的 duedate sortBy(todos, item => item.duedate ?? Infinity); // 将 undefined 或 null 视为最大值
-
稳定性： Array.prototype.sort() 在现代浏览器中通常是稳定的（即相等元素的相对顺序不会改变），但并非所有JavaScript环境都保证这一点。Schwartzian 变换本身不会破坏稳定性，因为它保留了原始元素的引用。
总结
通过引入一个通用的 sortBy 高阶函数，并结合键提取函数 keyFn 的思想，我们能够有效地整合和优化 JavaScript 中的重复排序逻辑。这种模式不仅使代码更加简洁、可读，而且极大地提高了排序功能的灵活性和可维护性。在实际开发中，采用这种策略能够帮助我们构建更健壮、更易于扩展的数据处理模块。