如何基于用户输入值对JavaScript中的JSON数组按匹配优先级排序

核心逻辑 #

自定义排序的核心是为每个元素计算匹配优先级：

• 通过String.prototype.indexOf()获取用户输入字符串在目标字段中首次出现的索引值，索引越小优先级越高
• 未匹配到的元素索引返回-1，我们将其优先级设为无穷大，统一排到列表末尾
• 优先级相同的元素，可按需配置次排序规则（如字段本身的字典序排序）

完整可运行代码 #

const userInput = "Man";
const objs = [ 
  { first_nm: 'Mango raw'},
  { first_nm: 'Devgad Mango'},
  { first_nm: 'Mantra santra'},
  { first_nm: 'Prag Mango'},
  { first_nm: 'Pirate aam Mango'}
];

/**
 * 按匹配位置优先级排序数组
 * @param {Array} arr 待排序的对象数组
 * @param {String} searchKey 要匹配的对象字段名
 * @param {String} searchStr 用户输入的匹配字符串
 * @returns 排序后的数组
 */
function sortByMatchPriority(arr, searchKey, searchStr) {
  return [...arr].sort((a, b) => { // 展开数组避免修改原数组
    // 计算两个元素的匹配优先级
    const indexA = a[searchKey].indexOf(searchStr);
    const priorityA = indexA === -1 ? Infinity : indexA;
    const indexB = b[searchKey].indexOf(searchStr);
    const priorityB = indexB === -1 ? Infinity : indexB;

    // 优先按匹配位置排序
    if (priorityA !== priorityB) {
      return priorityA - priorityB;
    }
    // 匹配位置相同时按字段字典序排序，可按需修改次排序规则
    return a[searchKey].localeCompare(b[searchKey]);
  });
}

// 调用测试
const sortedResult = sortByMatchPriority(objs, 'first_nm', userInput);
// 输出结果
sortedResult.forEach(item => console.log(item.first_nm));

结果说明 #

运行代码后默认输出的排序结果如下：

• Mango raw（匹配位置0，字典序靠前）
• Mantra santra（匹配位置0，字典序靠后）
• Prag Mango（匹配位置5）
• Devgad Mango（匹配位置7）
• Pirate aam Mango（匹配位置11）

如果你需要调整非前缀匹配元素的排序规则，比如要得到你示例中Devgad Mango排在Prag Mango之前的顺序，可以修改次排序逻辑，按匹配位置前的字符数量、单词数、字段整体长度等规则自定义调整即可。

扩展功能 #

如果需要支持大小写不敏感匹配，只需将匹配前的字符串统一转成小写/大写即可：

const indexA = a[searchKey].toLowerCase().indexOf(searchStr.toLowerCase());

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