如何按指定state值优先并按name升序排序对象数组？

给定这样一个对象数组：

const myArray = [
  {state: "enabled", name: "zName"},
  {state: "trying", name: "aName2"},
  {state: "disabled", name: "aName3"},
  {state: "disabled", name: "cName"},
  {state: "disabled", name: "bName"}
];

需要实现的排序规则：

• 优先把state等于指定值（比如"disabled"）的元素排在前面
• 满足第一个条件的元素，再按name字段升序排列

当指定排序条件为state == "disabled"时，预期排序结果如下：

[
  {state: "disabled", name: "aName3"},
  {state: "disabled", name: "bName"},
  {state: "disabled", name: "cName"},
  {state: "trying", name: "aName2"},
  {state: "enabled", name: "zName"}
]

解决方案 #

你可以用数组的sort()方法，传入自定义比较函数来实现这个逻辑：

function sortArrayByStateAndName(arr, givenValue) {
  // 先拷贝原数组，避免修改原数组本身
  return [...arr].sort((a, b) => {
    const aIsTarget = a.state === givenValue;
    const bIsTarget = b.state === givenValue;

    // 目标元素排前面
    if (aIsTarget && !bIsTarget) return -1;
    if (!aIsTarget && bIsTarget) return 1;

    // 同组内按name升序
    return a.name.localeCompare(b.name);
  });
}

// 调用示例
const sortedResult = sortArrayByStateAndName(myArray, "disabled");
console.log(sortedResult);

逻辑说明 #

1. 用[...arr]浅拷贝原数组，这样排序操作不会改变原数组
2. 比较函数里先判断两个元素是否是目标state：
   • 如果a是目标、b不是，a排前面（返回-1）
   • 如果b是目标、a不是，b排前面（返回1）
3. 当两个元素同属目标组或非目标组时，用localeCompare()按name的字典序升序排序，这个方法能正确处理大部分字符串排序场景

不管你指定的givenValue是什么，这个函数都能按要求完成排序。

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