如何用更少代码实现JavaScript对象数组的多规则排序？

给定数组：

const originalArr = [{a:5,b:2},{a:10,b:20},{a:1,b:3},{a:8,b:12}];

需要根据order参数的不同按指定顺序排序，可通过抽离排序规则为配置对象的方式，避免冗余的push逻辑，实现更简洁的代码：

实现代码 #

// 定义各order对应的排序优先级（用元素的a-b组合作为唯一标识）
const sortRules = {
  1: ['8-12', '10-20', '1-3', '5-2'],
  2: ['10-20', '1-3', '8-12', '5-2'],
  3: ['5-2', '1-3', '8-12', '10-20']
};

function getSortedArray(arr, order) {
  // 复制原数组避免修改原数据
  return [...arr].sort((itemA, itemB) => {
    // 生成元素的唯一标识
    const keyA = `${itemA.a}-${itemA.b}`;
    const keyB = `${itemB.a}-${itemB.b}`;
    // 根据规则中的索引位置比较排序
    return sortRules[order].indexOf(keyA) - sortRules[order].indexOf(keyB);
  });
}

// 使用示例
console.log(getSortedArray(originalArr, 1));
// 输出: [{a:8,b:12}, {a:10,b:20}, {a:1,b:3}, {a:5,b:2}]
console.log(getSortedArray(originalArr, 2));
// 输出: [{a:10,b:20}, {a:1,b:3}, {a:8,b:12}, {a:5,b:2}]
console.log(getSortedArray(originalArr, 3));
// 输出: [{a:5,b:2}, {a:1,b:3}, {a:8,b:12}, {a:10,b:20}]

优化思路 #

1. 规则抽离：把不同order对应的排序顺序整理成配置对象，后续新增或修改排序规则，只需要更新sortRules即可，无需改动排序逻辑代码。
2. 复用sort方法：利用数组原生的sort方法，结合规则中元素标识的索引位置进行比较，替代手动push元素的冗余操作。
3. 无副作用：通过扩展运算符[...arr]复制原数组，避免排序过程中修改原数组。

如果觉得字符串标识不够直观，也可以给每个元素添加唯一ID来优化可读性：

const originalArr = [
  {a:5,b:2, id: 'item1'},
  {a:10,b:20, id: 'item2'},
  {a:1,b:3, id: 'item3'},
  {a:8,b:12, id: 'item4'}
];

const sortRules = {
  1: ['item4', 'item2', 'item3', 'item1'],
  2: ['item2', 'item3', 'item4', 'item1'],
  3: ['item1', 'item3', 'item4', 'item2']
};

function getSortedArray(arr, order) {
  return [...arr].sort((a, b) => sortRules[order].indexOf(a.id) - sortRules[order].indexOf(b.id));
}

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