如何实现指定3个数组元素固定置顶，其余元素按collectionName升序排序？

需求说明 #

需要将数组中指定的三个元素按All Day→Morning→Evening的顺序固定在顶部，剩余元素按collectionName字段升序排序。

解决方案 #

核心思路是通过优先级映射控制置顶元素的顺序，再结合普通字符串排序处理剩余元素：

1. 定义一个优先级数组，按置顶顺序列出元素名称，用索引值判断元素优先级（索引越小，排序越靠前）
2. 在排序回调函数中分三种情况处理：
   • 两个元素都在优先级列表中：比较它们的优先级索引，索引小的排前面
   • 只有一个元素在优先级列表中：在列表中的元素直接排前面
   • 两个元素都不在优先级列表中：按collectionName升序排序

完整代码如下：

const sortArray = [
  { collectionID: 1, collectionName: 'All Day' },
  { collectionID: 2, collectionName: 'Evening' },
  { collectionID: 3, collectionName: 'Morning' },
  { collectionID: 4, collectionName: 'Memory' },
  { collectionID: 5, collectionName: 'Brain' },
  { collectionID: 6, collectionName: 'Heart' },
  { collectionID: 7, collectionName: 'Album' },
];

// 定义置顶元素的优先级顺序
const priorityOrder = ['All Day', 'Morning', 'Evening'];

sortArray.sort((a, b) => {
  const aPriority = priorityOrder.indexOf(a.collectionName);
  const bPriority = priorityOrder.indexOf(b.collectionName);

  // 处理置顶元素的排序逻辑
  if (aPriority !== -1 && bPriority !== -1) {
    return aPriority - bPriority;
  }
  if (aPriority !== -1) {
    return -1;
  }
  if (bPriority !== -1) {
    return 1;
  }

  // 处理剩余元素的升序排序
  return a.collectionName.localeCompare(b.collectionName);
});

console.log(sortArray);

输出结果 #

执行后会得到符合需求的排序结果：

[
  { collectionID: 1, collectionName: 'All Day' },
  { collectionID: 3, collectionName: 'Morning' },
  { collectionID: 2, collectionName: 'Evening' },
  { collectionID: 7, collectionName: 'Album' },
  { collectionID: 5, collectionName: 'Brain' },
  { collectionID: 6, collectionName: 'Heart' },
  { collectionID: 4, collectionName: 'Memory' }
]

为什么普通升序排序不生效？ #

你之前的普通升序排序只单纯比较了collectionName的字符串字典序，没有对指定元素设置特殊优先级，所以Album这类字典序靠前的元素会排在All Day前面，不符合置顶需求。

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