如何实现数组按前缀匹配优先级排序？修正当前JS排序逻辑问题

需求说明 #

过滤数组中包含指定前缀（如'T'/'Th'/'The'、'Da'）的元素，排序规则为：

• 开头匹配的元素排在最前
• 中间单词匹配的元素排在后面

示例：

• 输入'The'时，正确输出：

  ['The Shawshank Redemption', 'The Godfather', 'The Godfather: Part II', 'The Dark Knight', 'Dora the explorer']
  

• 输入'Da'时，正确输出：

  ['Dark Knight', 'The Dark Knight']
  

当前代码返回顺序错误（如输入'The'时'Dora the explorer'排在首位），以下是问题排查和修正方案：

原代码问题分析 #

1. 大小写匹配不一致：排序时直接使用原大小写的character去匹配转小写后的字符串，导致开头是'The'的元素转小写后找不到"The"，indexOf返回-1；'Dora the explorer'转小写后同样找不到"The"，也返回-1。排序函数返回0，数组保持原输入顺序，因此'Dora...'排在首位。
2. 排序逻辑精度不足：单纯依赖indexOf的差值排序，无法精准区分"开头匹配"和"中间匹配"的优先级，且无法保证同类型元素的原顺序。

修正后的代码 #

const fruits = ['Dora the explorer', 'The Shawshank Redemption', 'The Godfather', 'The Godfather: Part II', 'The Dark Knight', 'Dark Knight'];

const character = "The";
const lowerChar = character.toLowerCase(); // 统一转小写，避免大小写敏感问题

const filteredNames = fruits
  .filter((item) => {
    const prefixLength = lowerChar.length;
    // 拆分单词，检查每个单词是否以指定前缀开头（忽略大小写）
    return item.split(' ').some(word => word.toLowerCase().slice(0, prefixLength) === lowerChar);
  })
  .sort((a, b) => {
    const aLower = a.toLowerCase();
    const bLower = b.toLowerCase();
    
    // 判断是否为开头匹配
    const aStartsWith = aLower.startsWith(lowerChar);
    const bStartsWith = bLower.startsWith(lowerChar);
    
    // 开头匹配的元素优先排在前面
    if (aStartsWith && !bStartsWith) return -1;
    if (!aStartsWith && bStartsWith) return 1;
    
    // 同类型元素保持原数组相对顺序（稳定排序）
    // 若需按字典序排序，可替换为：return aLower.localeCompare(bLower)
    return 0;
  });

console.log(filteredNames);

修正点说明 #

1. 统一大小写处理：提前将character转成小写，过滤和排序时均使用小写字符串匹配，避免大小写敏感导致的错误。
2. 精准排序逻辑：
   • 用startsWith直接判断元素是否以指定前缀开头，优先级高于中间匹配的元素。
   • 同类型元素（均为开头/中间匹配）返回0，保持原数组的相对顺序（稳定排序）；若需要字典序排序，可替换排序逻辑为aLower.localeCompare(bLower)。
3. 过滤逻辑优化：将前缀长度的计算和大小写转换提前，减少重复计算，提升效率。

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