本文旨在探讨如何在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 { let comparison = 0; if (a.duedate > b.duedate) { comparison = 1; } else if (a.duedate { 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
代码解析：
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] 如果 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 返回字符串，可以直接在 sort 函数中用 localeCompareconst 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 应该能够健壮地处理可能不存在的属性值，例如返回一个默认值或通过可选链操作符 ?. 避免错误。
// 示例：处理可能不存在的 duedatesortBy(todos, item => item.duedate ?? Infinity); // 将 undefined 或 null 视为最大值
稳定性： Array.prototype.sort() 在现代浏览器中通常是稳定的（即相等元素的相对顺序不会改变），但并非所有JavaScript环境都保证这一点。Schwartzian 变换本身不会破坏稳定性，因为它保留了原始元素的引用。
总结
通过引入一个通用的 sortBy 高阶函数，并结合键提取函数 keyFn 的思想，我们能够有效地整合和优化 JavaScript 中的重复排序逻辑。这种模式不仅使代码更加简洁、可读，而且极大地提高了排序功能的灵活性和可维护性。在实际开发中，采用这种策略能够帮助我们构建更健壮、更易于扩展的数据处理模块。
以上就是JavaScript通用排序策略：利用高阶函数简化数据排序逻辑的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536722.html
微信扫一扫 
支付宝扫一扫 
