本文介绍如何在 javascript 中先筛选包含指定关键词的对象，再按关键词在字符串中首次出现的位置升序排序，从而实现“前缀匹配优先”的搜索结果排序效果。
本文介绍如何在 javascript 中先筛选包含指定关键词的对象，再按关键词在字符串中首次出现的位置升序排序，从而实现“前缀匹配优先”的搜索结果排序效果。
在实现搜索功能时，仅使用 `filter()` 往往只能满足“是否包含”的基本需求，但无法体现匹配质量差异。例如，当用户输入 `"po"` 时，`"poland"` 和 `"portugal"` 是理想匹配（`"po"` 出现在开头），而 `"singpore"`（含 `"po"` 在中间）或 `"French Polynesia"`（含 `"po"` 在中部）匹配度较低。为提升用户体验，应优先返回关键词出现在更靠前位置的结果。解决方法是：先过滤，再按 indexOf() 排序。String.prototype.indexOf() 返回子字符串首次出现的索引（从 0 开始），索引越小表示匹配越靠前。我们将所有匹配项按该索引值升序排列，即可实现“首匹配优先”。
以下是完整示例代码：
let array = [
{ name: "singpore" },
{ name: "French Polynesia" },
{ name: "poland" },
{ name: "portugal" }
];
let searchText = "po";
let filteredAndSorted = array
.filter(item => item.name.toLowerCase().includes(searchText))
.sort((a, b) => {
const idxA = a.name.toLowerCase().indexOf(searchText);
const idxB = b.name.toLowerCase().indexOf(searchText);
return idxA - idxB;
});
console.log(filteredAndSorted);
// 输出:
// [
// { name: "poland" },
// { name: "portugal" },
// { name: "singpore" },
// { name: "French Polynesia" }
// ]✅ 关键说明：
-
toLowerCase()确保大小写不敏感匹配； -
includes()保证只保留含关键词的项； -
sort()中用indexOf()差值作为比较依据，天然支持升序（0 - 若多个对象中关键词起始位置相同（如
"po"在"poland"和"polar"中均位于索引 0），它们的相对顺序保持原数组稳定（现代浏览器中Array.prototype.sort()在 V8 引擎下是稳定的）。
⚠️ 注意事项：
- 若
searchText为空字符串，indexOf("")恒为0，可能导致无意义排序，建议前置校验：if (!searchText.trim()) return [];； - 对于性能敏感场景（如大型数组或高频搜索），可预先计算并缓存
toLowerCase()和indexOf()结果，避免重复调用； - 如需进一步增强体验，可结合
startsWith()提权“完全前缀匹配”，或引入模糊匹配库（如 Fuse.js）处理拼写容错。
通过“过滤 + 位置加权排序”组合策略，你能在不引入复杂算法的前提下，显著提升前端搜索的相关性与直观性。
