
在前端开发中,我们经常需要对包含大量数据的对象数组进行筛选和搜索。常见的场景包括:
这些需求往往需要一个既灵活又高效的解决方案。
为了同时满足上述多种过滤条件,我们选择使用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' }
]
*/理解正则表达式的构建是掌握此解决方案的关键:
通过巧妙地运用JavaScript的正则表达式,我们成功实现了一个功能强大且灵活的对象数组过滤函数,能够优雅地处理“开头匹配”、“多词顺序匹配”以及“内容包含”等多种搜索场景。理解正则表达式的构建逻辑是掌握此方案的关键。在实际应用中,结合性能优化和用户体验的考量,可以构建出高效且用户友好的数据筛选功能。
以上就是JavaScript数组对象高级过滤:实现多条件(开头匹配与内容包含)搜索的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号