如何合并JavaScript待办列表中三个相似的排序函数？

当然可以合并这三个排序函数！它们的核心逻辑几乎一致，只是针对的字段和字符串处理略有区别，我们可以封装成一个通用函数来复用代码，既减少冗余又便于维护。

通用排序函数实现 #

function sortTodos(array, key, transform = (val) => val) {
  return array.sort((a, b) => {
    // 对字段值进行可选的转换处理
    const valA = transform(a[key]);
    const valB = transform(b[key]);
    
    // 统一的比较逻辑
    if (valA > valB) return 1;
    if (valA < valB) return -1;
    return 0;
  });
}

修改事件监听逻辑 #

把原来三个单独的排序函数调用，替换为通用函数的调用：

// 按标题排序：传入转大写的处理函数，避免大小写干扰排序
titleSort.addEventListener("click", () => {
  sortTodos(todos, 'title', (str) => str.toUpperCase());
  cleanTodo();
  showTodos();
});

// 按日期排序：无需额外转换，直接传入字段名
dateSort.addEventListener("click", () => {
  sortTodos(todos, 'duedate');
  cleanTodo();
  showTodos();
});

// 按优先级排序：同样直接传入字段名
prioSort.addEventListener("click", () => {
  sortTodos(todos, 'prio');
  cleanTodo();
  showTodos();
});

逻辑说明 #

• sortTodos 函数的三个参数：
  • array：需要排序的待办数组
  • key：排序依据的对象字段名（比如'title'、'duedate'）
  • transform：可选的转换函数，用于对排序前的字段值做预处理（比如标题转大写），默认直接返回原数值
• 核心比较逻辑和你原来的代码完全一致，只是把硬编码的字段替换成了动态传入的key，同时通过transform兼容了标题的特殊处理需求

以后如果需要新增其他排序字段，只需要调用sortTodos并传入对应的字段名即可，无需再重复编写几乎一样的排序函数。

内容的提问来源于stack exchange，提问作者Colette Admotion