优化JavaScript中重复排序逻辑的通用方法

// 示例数据结构
const todos = [
  { title: 'Learn JavaScript', duedate: 9, prio: 1 },
  { title: 'Build Todo App', duedate: 8, prio: 2 },
  { title: 'Write Blog Post', duedate: 7, prio: 3 },
  { title: 'Review Code', duedate: 6, prio: 2 },
];

// 按标题排序
function sortTitle(array) {
  return array.sort((a, b) => {
    const titleA = a.title.toUpperCase();
    const titleB = b.title.toUpperCase();
    return (titleA > titleB) - (titleA < titleB); // 简化比较逻辑
  });
}

// 按日期排序
function sortDate(array) {
  return array.sort((a, b) => {
    return (a.duedate > b.duedate) - (a.duedate < b.duedate);
  });
}

// 按优先级排序
function sortPrio(array) {
  return array.sort((a, b) => {
    return (a.prio > b.prio) - (a.prio < b.prio);
  });
}

// 假设有对应的DOM元素和事件监听
// titleSort.addEventListener("click", () => { sortTitle(todos); cleanTodo(); showTodos(); });
// dateSort.addEventListener("click", () => { sortDate(todos); cleanTodo(); showTodos(); });
// prioSort.addEventListener("click", () => { sortPrio(todos); cleanTodo(); showTodos(); });

/**
 * 通用排序函数，基于Schwartzian变换
 * @param {Array} ary - 待排序的数组
 * @param {Function} keyFn - 键函数，用于从数组元素中提取排序键
 * @returns {Array} - 排序后的新数组
 */
let 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: 从已排序的元组中提取原始元素

/*
  关于比较逻辑 `(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
  这与 Array.prototype.sort() 期望的比较函数返回值 (-1, 0, 1) 完全一致，是一种简洁的写法。
*/

// 示例数据
let todos = [
    { title: 'Learn JavaScript', duedate: 9, prio: 1 },
    { title: 'Build Todo App', duedate: 8, prio: 2 },
    { title: 'Write Blog Post', duedate: 7, prio: 3 },
    { title: 'Review Code', duedate: 6, prio: 2 },
    { title: 'Debug Application', duedate: 5, prio: 1 },
];

// 1. 按标题（字符串，大小写不敏感）排序
console.log('--- 按标题排序 ---');
const sortedByTitle = sortBy(todos, item => item.title.toUpperCase());
console.log(sortedByTitle);
/*
[
  { title: 'Build Todo App', duedate: 8, prio: 2 },
  { title: 'Debug Application', duedate: 5, prio: 1 },
  { title: 'Learn JavaScript', duedate: 9, prio: 1 },
  { title: 'Review Code', duedate: 6, prio: 2 },
  { title: 'Write Blog Post', duedate: 7, prio: 3 }
]
*/

// 2. 按截止日期（数字）排序
console.log('\n--- 按截止日期排序 ---');
const sortedByDate = sortBy(todos, item => item.duedate);
console.log(sortedByDate);
/*
[
  { title: 'Debug Application', duedate: 5, prio: 1 },
  { title: 'Review Code', duedate: 6, prio: 2 },
  { title: 'Write Blog Post', duedate: 7, prio: 3 },
  { title: 'Build Todo App', duedate: 8, prio: 2 },
  { title: 'Learn JavaScript', duedate: 9, prio: 1 }
]
*/

// 3. 按优先级（数字）排序
console.log('\n--- 按优先级排序 ---');
const sortedByPrio = sortBy(todos, item => item.prio);
console.log(sortedByPrio);
/*
[
  { title: 'Learn JavaScript', duedate: 9, prio: 1 },
  { title: 'Debug Application', duedate: 5, prio: 1 },
  { title: 'Build Todo App', duedate: 8, prio: 2 },
  { title: 'Review Code', duedate: 6, prio: 2 },
  { title: 'Write Blog Post', duedate: 7, prio: 3 }
]
*/

// 与事件监听器集成
// 假设 cleanTodo() 和 showTodos() 是用于更新UI的函数
// titleSort.addEventListener("click", () => {
//     todos = sortBy(todos, item => item.title.toUpperCase()); // 更新todos数组
//     cleanTodo();
//     showTodos();
// });

// dateSort.addEventListener("click", () => {
//     todos = sortBy(todos, item => item.duedate);
//     cleanTodo();
//     showTodos();
// });

// prioSort.addEventListener("click", () => {
//     todos = sortBy(todos, item => item.prio);
//     cleanTodo();
//     showTodos();
// });