JavaScript通用排序策略：利用高阶函数简化数据排序逻辑-js教程-PHP中文网

JavaScript通用排序策略：利用高阶函数简化数据排序逻辑

霞舞

发布： 2025-11-07 12:05:11

原创

175人浏览过

JavaScript通用排序策略：利用高阶函数简化数据排序逻辑

本文旨在探讨如何在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 数组进行排序：

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

// 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 中的重复排序逻辑。这种模式不仅使代码更加简洁、可读，而且极大地提高了排序功能的灵活性和可维护性。在实际开发中，采用这种策略能够帮助我们构建更健壮、更易于扩展的数据处理模块。

以上就是JavaScript通用排序策略：利用高阶函数简化数据排序逻辑的详细内容，更多请关注php中文网其它相关文章！