需求背景：多条件对象数组过滤
在前端开发中，我们经常需要对包含大量数据的对象数组进行筛选和搜索。常见的场景包括：
- 开头匹配（StartWith）：用户输入部分关键词，系统返回以这些关键词开头的匹配项。例如，搜索“tali”能找到“Taliparamba Co Op Hospital”。
- 多词顺序匹配：用户输入多个关键词，系统返回包含所有关键词且按顺序出现的匹配项。例如，搜索“tali Co OP”也能找到“Taliparamba Co Op Hospital”。
- 内容包含（Contains）：用户输入关键词，系统返回名称中包含该关键词的所有匹配项，无论关键词出现在哪个位置。例如，搜索“ath”能找到“Athikkal Saw Mill,Kallai”和“Marhaba Ice Plant Atholi”。
这些需求往往需要一个既灵活又高效的解决方案。
核心策略：基于正则表达式的灵活匹配
为了同时满足上述多种过滤条件，我们选择使用JavaScript的正则表达式（RegExp）作为核心工具。正则表达式的强大之处在于其能够定义复杂的匹配模式，并提供高效的字符串搜索能力。
我们的策略是：
- 将用户输入的搜索字符串分解成独立的单词。
- 利用正则表达式的元字符，构建一个能够匹配这些单词按顺序出现，且单词之间可以有任意字符（或无字符）间隔的模式。
- 确保匹配过程忽略大小写，以提升用户体验。
实现步骤与代码示例
以下是实现多条件对象数组过滤的JavaScript函数及其应用示例：
立即学习“Java免费学习笔记（深入）”；
const testData = [
{ id: 1, name: 'Taliparamba Co Op Hospital' },
{ id: 1, name: 'Athikkal Saw Mill,Kallai' },
{ id: 1, name: 'Marhaba Ice Plant Atholi' },
];
/**
* 根据搜索词过滤对象数组
* @param {Array<Object>} arr - 待过滤的对象数组
* @param {string} searchTerm - 用户输入的搜索词
* @returns {Array<Object>} 过滤后的数组
*/
function filterArrayOfObjects(arr, searchTerm) {
if (!searchTerm) {
return arr; // 如果搜索词为空，返回原数组
}
// 1. 将搜索词按空格分割成单词，并对每个单词进行正则转义
// 转义是为了防止搜索词中包含特殊正则字符（如 . * + ? 等）导致匹配错误
const escapedSearchTerms = searchTerm
.split(' ')
.map(word => word.replace(/[.*+?^${}()|[]\]/g, '\$&'));
// 2. 构建正则表达式模式
// 使用 '.*?' 非贪婪匹配任意字符（0次或多次）连接各个单词，
// 并用 '\b' 单词边界确保匹配的是独立的单词或单词的一部分，而不是单词内部的字符。
const pattern = escapedSearchTerms.join('.*?\b');
// 3. 创建正则表达式对象
// '\b' 在模式开头，确保整个搜索从一个单词边界开始匹配。
// 'i' 标志表示忽略大小写。
const regex = new RegExp('\b' + pattern, 'i');
// 4. 使用 Array.prototype.filter() 方法进行过滤
return arr.filter(item => regex.test(item.name));
}
// 示例用法：
console.log("--- 搜索 'tali' (开头匹配) ---");
console.log(filterArrayOfObjects(testData, 'tali'));
/*
预期输出:
[ { id: 1, name: 'Taliparamba Co Op Hospital' } ]
*/
console.log("
--- 搜索 'tali Co OP' (多词顺序匹配) ---");
console.log(filterArrayOfObjects(testData, 'tali Co OP'));
/*
预期输出:
[ { id: 1, name: 'Taliparamba Co Op Hospital' } ]
*/
console.log("
--- 搜索 'ath' (内容包含) ---");
console.log(filterArrayOfObjects(testData, 'ath'));
/*
预期输出:
[
{ id: 1, name: 'Athikkal Saw Mill,Kallai' },
{ id: 1, name: 'Marhaba Ice Plant Atholi' }
]
*/
console.log("
--- 搜索 'mill' (内容包含) ---");
console.log(filterArrayOfObjects(testData, 'mill'));
/*
预期输出:
[ { id: 1, name: 'Athikkal Saw Mill,Kallai' } ]
*/
console.log("
--- 搜索 'hospital' (内容包含，大小写不敏感) ---");
console.log(filterArrayOfObjects(testData, 'hospital'));
/*
预期输出:
[ { id: 1, name: 'Taliparamba Co Op Hospital' } ]
*/
console.log("
--- 搜索 '' (空搜索词) ---");
console.log(filterArrayOfObjects(testData, ''));
/*
预期输出:
[
{ id: 1, name: 'Taliparamba Co Op Hospital' },
{ id: 1, name: 'Athikkal Saw Mill,Kallai' },
{ id: 1, name: 'Marhaba Ice Plant Atholi' }
]
*/关键点解析：正则表达式构建
理解正则表达式的构建是掌握此解决方案的关键：
- searchTerm.split(' '): 首先，将用户输入的搜索词按空格分割成一个单词数组。例如，'tali Co OP' 会变成 ['tali', 'Co', 'OP']。
- *`.map(word => word.replace(/[.+?^${}()|[]]/g, '$&'))**: 这一步非常重要，它对每个分割出的单词进行了正则表达式特殊字符的转义。例如，如果搜索词是"A.B"，没有转义的话.会被解释为匹配任意字符，而不是字面上的点。$&` 表示将匹配到的特殊字符前面加上一个反斜杠进行转义。
- *`.join('.?')`**: 这是构建模式的核心。
- .*?: 这是一个非贪婪匹配模式。. 匹配除换行符以外的任何单个字符，* 匹配前一个字符零次或多次，? 使 * 变为非贪婪模式，即尽可能少地匹配字符。这意味着在两个搜索单词之间，可以有零个或多个任意字符。
- \b: 这是一个单词边界锚点。它匹配一个单词字符（字母、数字、下划线）和一个非单词字符（或字符串的开头/结尾）之间的位置。使用它确保了我们匹配的是完整的单词或单词的一部分，而不是在另一个单词内部的字符序列。
- 例如，['tali', 'Co', 'OP'] 会被连接成 tali.*?\bCo.*?\bOP。
-
new RegExp('\b' + pattern, 'i'):
- 在整个模式的开头添加 \b：这确保了整个搜索模式（即第一个搜索单词）必须从目标字符串中的一个单词边界开始匹配。这对于实现“开头匹配”和“多词顺序匹配”至关重要，因为它防止了在单词内部的任意位置开始匹配。
- 'i' 标志：表示执行不区分大小写的匹配。这极大地提升了用户体验，用户无需关心输入的大小写。
使用考量与进阶优化
-
性能考量：
- 对于小型数据集，这种方法非常高效。但如果处理数万甚至数十万条数据，且搜索操作频繁，正则表达式的构建和测试可能会带来一定的性能开销。
- 可以考虑对搜索结果进行缓存，或者在用户输入时使用防抖（debounce）或节流（throttle）技术，避免短时间内频繁触发过滤操作。
-
精确度与灵活性：
- 当前的 \b 确保了匹配从单词边界开始，这在很多场景下是理想的。如果需要更严格的“字符串开头匹配”而非“单词边界开头匹配”，可以将 new RegExp('\b' + pattern, 'i') 修改为 new RegExp('^' + pattern, 'i')，但这样会限制 tali Co OP 这种多词匹配，除非 Taliparamba Co Op Hospital 本身就是以 tali Co OP 开头。
- 如果希望匹配结果包含所有符合条件的字段（不仅仅是name），可以将 item.name 替换为遍历 item 所有字符串类型字段的逻辑。
-
用户体验：
- 提供清晰的搜索输入框，并可以考虑在搜索结果为空时给出提示。
- 对于复杂的搜索词，可以提供搜索语法提示。
总结
通过巧妙地运用JavaScript的正则表达式，我们成功实现了一个功能强大且灵活的对象数组过滤函数，能够优雅地处理“开头匹配”、“多词顺序匹配”以及“内容包含”等多种搜索场景。理解正则表达式的构建逻辑是掌握此方案的关键。在实际应用中，结合性能优化和用户体验的考量，可以构建出高效且用户友好的数据筛选功能。
