JavaScript中使用localeCompare实现大写字母优先的对象数组排序

要实现你需要的排序规则——先按lastName升序，相同则按firstName升序，且排序优先级为符号 > 数字 > 'A-Z' > 'a-z'，可以通过调整localeCompare的参数来修正默认的大小写排序顺序，具体方案如下：

核心思路 #

localeCompare默认的大小写排序会把小写字母放在大写前面，我们可以通过配置caseFirst: 'upper'让大写字母优先于小写，同时设置sensitivity: 'case'确保大小写不同的字符串被明确区分。在排序函数中，先比较lastName，只有当lastName相等时再比较firstName。

代码示例 #

// 示例对象数组
const people = [
  { lastName: 'Smith', firstName: 'alice' },
  { lastName: 'smith', firstName: 'Bob' },
  { lastName: '123Doe', firstName: 'Charlie' },
  { lastName: '@Doe', firstName: 'David' },
  { lastName: 'Smith', firstName: 'Alice' },
];

// 自定义排序函数
people.sort((a, b) => {
  // 先比较lastName
  const lastNameSort = a.lastName.localeCompare(b.lastName, undefined, {
    caseFirst: 'upper', // 让大写字母优先排序
    sensitivity: 'case' // 严格区分大小写
  });
  
  // 如果lastName不同，直接返回排序结果
  if (lastNameSort !== 0) {
    return lastNameSort;
  }
  
  // lastName相同时，比较firstName
  return a.firstName.localeCompare(b.firstName, undefined, {
    caseFirst: 'upper',
    sensitivity: 'case'
  });
});

console.log(people);

排序结果验证 #

运行上述代码后，数组会按照预期顺序排列：

[
  { lastName: '@Doe', firstName: 'David' },
  { lastName: '123Doe', firstName: 'Charlie' },
  { lastName: 'Smith', firstName: 'Alice' },
  { lastName: 'Smith', firstName: 'alice' },
  { lastName: 'smith', firstName: 'Bob' }
]

完全符合符号 → 数字 → 大写字母开头字符串 → 小写字母开头字符串的优先级，且相同姓氏下名字也按此规则排序。

兼容性备选方案 #

如果需要兼容不支持caseFirst参数的老环境，可以通过先比较字符串的大写版本，再比较原字符串的方式实现：

people.sort((a, b) => {
  // 先比较lastName的大写形式，确保同姓氏的项排在一起
  const lastNameUpperCompare = a.lastName.toUpperCase().localeCompare(b.lastName.toUpperCase());
  if (lastNameUpperCompare !== 0) {
    return lastNameUpperCompare;
  }
  // 大写相同则比较原字符串，保证大写开头的项排在小写前面
  const lastNameOriginalCompare = a.lastName.localeCompare(b.lastName);
  if (lastNameOriginalCompare !== 0) {
    return lastNameOriginalCompare;
  }
  // 同理处理firstName
  const firstNameUpperCompare = a.firstName.toUpperCase().localeCompare(b.firstName.toUpperCase());
  if (firstNameUpperCompare !== 0) {
    return firstNameUpperCompare;
  }
  return a.firstName.localeCompare(b.firstName);
});

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