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<Object>} ary - 待排序的数组。
 * @param {Function} keyFn - 键提取函数，接受一个数组元素，返回用于排序的键值。
 * @returns {Array<Object>} 排序后的新数组。
 */
const sortBy = (ary, keyFn) => ary
    .map(item => [keyFn(item), item]) // 1. 提取键值，创建 [键, 原始元素] 对
    .sort((a, b) => (a[0] > b[0]) - (a[0] < b[0])) // 2. 根据键值进行排序
    .map(pair => pair[1]); // 3. 还原原始元素

让我们详细解析这个sortBy函数：

1. ary.map(item => [keyFn(item), item]):

   • 这一步遍历原始数组ary中的每个item。
   • 对于每个item，它调用keyFn(item)来获取用于排序的“键值”。
   • 然后，它创建一个包含[键值, 原始元素]的数组对。例如，如果原始数组是[{title: 'B'}, {title: 'A'}]，keyFn是item => item.title，则这一步会生成[['B', {title: 'B'}], ['A', {title: 'A'}]]。

2. .sort((a, b) => (a[0] > b[0]) - (a[0] < b[0])):

   • 这一步对上一步生成的键值对数组进行排序。
   • a和b是两个键值对，例如['B', {title: 'B'}]和['A', {title: 'A'}]。
   • a[0]和b[0]分别代表它们的键值。
   • 比较函数(a[0] > b[0]) - (a[0] < b[0])是一个非常简洁的写法：
     • 如果 a[0] > b[0]，则 (true) - (false) 变为 1 - 0 = 1。
     • 如果 a[0] < b[0]，则 (false) - (true) 变为 0 - 1 = -1。
     • 如果 a[0] === b[0]，则 (false) - (false) 变为 0 - 0 = 0。
   • 这个比较函数能够正确处理字符串和数字的升序排序。

3. .map(pair => pair[1]):

   • 排序完成后，我们得到一个按键值排序的键值对数组。
   • 这一步遍历这些已排序的键值对，并只返回每个pair中的原始元素（即pair[1]），从而得到最终排序后的原始数组。

示例：应用于不同数据字段

假设我们有以下待办事项数据：

let todos = [
    { title: 'Learn JavaScript', duedate: 9, prio: 2 },
    { title: 'Build Todo App', duedate: 8, prio: 1 },
    { title: 'Write Blog Post', duedate: 7, prio: 3 },
    { title: 'Refactor Code', duedate: 6, prio: 2 },
    { title: 'Review PRs', duedate: 5, prio: 1 },
];

console.log('原始数据:', todos);

// 按标题字母顺序排序（忽略大小写）
let sortedByTitle = sortBy(todos, item => item.title.toUpperCase());
console.log('按标题排序:', sortedByTitle);

// 按截止日期排序
let sortedByDate = sortBy(todos, item => item.duedate);
console.log('按日期排序:', sortedByDate);

// 按优先级排序
let sortedByPrio = sortBy(todos, item => item.prio);
console.log('按优先级排序:', sortedByPrio);

运行上述代码，你会看到sortBy函数能够根据不同的keyFn参数，灵活地对同一个todos数组进行不同维度的排序。

集成到实际应用中

在实际的待办事项应用中，我们可以将sortBy函数与事件监听器结合，替换掉之前多个独立的排序函数：

// 假设 cleanTodo() 和 showTodos() 是更新UI的函数
// 假设 titleSort, dateSort, prioSort 是对应的DOM按钮元素
// 假设 todos 是全局或可访问的待办事项数组

function updateAndDisplay(keyFn) {
    // 使用 sortBy 对 todos 数组进行排序，并更新 todos
    // 注意：JavaScript的 Array.prototype.sort() 会修改原数组，
    // 而我们实现的 sortBy 返回一个新数组，因此需要重新赋值。
    todos = sortBy(todos, keyFn);
    cleanTodo(); // 清空现有列表
    showTodos(); // 重新渲染排序后的列表
}

titleSort.addEventListener("click", () => {
    updateAndDisplay(item => item.title.toUpperCase());
});

dateSort.addEventListener("click", () => {
    updateAndDisplay(item => item.duedate);
});

prioSort.addEventListener("click", () => {
    updateAndDisplay(item => item.prio);
});

通过这种方式，我们不仅减少了代码重复，还使得添加新的排序方式变得异常简单，只需提供一个新的keyFn即可。

注意事项与最佳实践

1. 不可变性（Immutability）: 我们实现的sortBy函数通过map操作创建了中间数组，并最终返回一个新数组，而没有直接修改原始数组ary。这符合函数式编程的理念，有助于避免副作用，提高代码可预测性。在实际应用中，保持数据不可变性是一个良好的实践。
2. 大小写不敏感排序: 对于字符串排序，如示例中item => item.title.toUpperCase()所示，通常需要将字符串转换为统一的大小写（如全部大写或全部小写）再进行比较，以实现大小写不敏感的排序。
3. 日期排序: 如果duedate是JavaScript的Date对象，可以直接比较它们。如果它是日期字符串，可能需要先转换为Date对象或使用其他日期库进行解析，以确保正确的排序。
4. 性能考量: sortBy函数内部使用了两次map和一个sort。对于非常大的数据集，这会带来一定的性能开销。然而，对于大多数前端应用场景，这种开销通常可以接受，并且其带来的代码简洁性和可维护性收益远大于潜在的性能损失。如果遇到极端性能瓶颈，可能需要考虑更底层的优化。
5. 自定义比较逻辑: (a[0] > b[0]) - (a[0] < b[0]) 适用于升序的数字和字符串比较。如果需要降序排序，可以简单地改为 (a[0] < b[0]) - (a[0] > b[0])。对于更复杂的比较逻辑（例如多字段排序、自定义排序规则），keyFn可以返回一个复合键，或者直接在sort的回调函数中实现更复杂的逻辑，但这会稍微偏离sortBy的通用性。

总结

通过引入一个通用的sortBy函数和“键提取”的理念，我们成功地将JavaScript中重复的排序逻辑进行了抽象和优化。这种模式不仅减少了代码量，提高了可读性和可维护性，还使得代码更具扩展性，能够轻松应对未来可能出现的各种排序需求。掌握这种通用函数的设计思想，是编写高质量、可复用JavaScript代码的重要一步。

到这里，我们也就讲完了《JavaScript排序优化技巧与实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！