登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript多条件模糊筛选对象数组技巧

JavaScript多条件模糊筛选对象数组技巧

2025-10-24 20:27:41 0浏览 收藏

在JavaScript中，针对对象数组进行多条件模糊筛选是前端开发中常见的需求。本文深入探讨如何利用正则表达式实现高效、灵活的筛选，满足“开头匹配”和“包含匹配”等复杂场景。文章详细解析了如何动态构建正则表达式，以支持单词边界区分、多词模糊匹配和忽略大小写等特性，并提供了可直接使用的代码示例。通过学习本文，开发者能够掌握利用正则表达式提升数据过滤功能的关键技巧，为构建更智能、用户体验更佳的Web应用奠定基础。此外，还讨论了性能优化、特殊字符处理以及大小写敏感性等实际应用中需要注意的问题。

JavaScript 对象数组高级筛选：支持多条件模糊匹配

本文详细介绍了如何在JavaScript中对对象数组进行灵活筛选，以满足“开头匹配”和“包含匹配”等多条件需求。通过利用正则表达式的强大功能，我们能够高效处理单词或多词的模糊搜索，并提供了具体实现代码和使用示例，帮助开发者构建更智能的数据过滤功能。

1. 引言与问题描述

在前端开发中，我们经常需要根据用户输入对列表数据进行实时过滤。常见的需求包括：

  • 前缀匹配 (Starts With)：搜索词是目标字符串的开头部分。例如，搜索“tali”能找到“Taliparamba Co Op Hospital”。
  • 包含匹配 (Contains)：搜索词是目标字符串的任意部分。例如，搜索“ath”能找到“Athikkal Saw Mill,Kallai”和“Marhaba Ice Plant Atholi”。
  • 多词模糊匹配：当搜索词包含多个单词时，希望这些单词能以任意顺序且中间隔着任意字符的方式匹配目标字符串中的相应单词。例如，搜索“tali Co OP”也能找到“Taliparamba Co Op Hospital”。

传统的 startsWith() 或 includes() 方法在处理这些复杂、灵活的匹配场景时显得力不从心，尤其是在需要同时兼顾多词匹配和单词边界的情况下。

我们以下面的对象数组为例：

const test = [
    { id: 1, name: 'Taliparamba Co Op Hospital' },
    { id: 1, name: 'Athikkal Saw Mill,Kallai' },
    { id: 1, name: 'Marhaba Ice Plant Atholi' },
];

目标是编写一个通用的函数，能够根据用户输入的搜索字符串 str 对 test 数组中的 name 字段进行上述灵活的过滤。

2. 解决方案：利用正则表达式

解决这类复杂过滤问题的最佳工具是正则表达式（Regular Expression）。正则表达式提供了强大的模式匹配能力，能够灵活定义搜索规则。

核心思路是根据用户输入的搜索字符串动态构建一个正则表达式，该表达式能够：

  1. 区分单词边界：确保匹配的是完整的单词或单词的开头，而非单词内部的字符。
  2. 支持多词匹配：允许搜索字符串中的多个单词在目标字符串中按顺序出现，中间可以有其他字符。
  3. 忽略大小写：提供更友好的用户体验。

2.1 正则表达式构建详解

我们将通过以下步骤构建正则表达式：

  1. 拆分搜索字符串：将用户输入的搜索字符串按空格拆分成单词数组。例如，'tali Co OP' 变为 ['tali', 'Co', 'OP']。
  2. 连接单词：使用 .*?\\b 作为连接符将拆分后的单词重新连接起来。
    • .*?：匹配任意字符零次或多次，? 使其成为非贪婪匹配，即尽可能少地匹配字符。这允许搜索词中的单词之间存在其他字符。
    • \\b：这是一个单词边界（Word Boundary）元字符。它匹配一个单词字符（字母、数字、下划线）和一个非单词字符之间的位置，或者字符串的开头/结尾。这确保了我们匹配的是独立的单词或单词的开头，而不是单词内部的子串。
  3. 添加起始单词边界：在整个正则表达式的开头添加 \\b，确保第一个搜索词也从单词边界开始匹配。
  4. 设置不区分大小写：使用 i 标志（ignore case）使匹配不区分大小写。

综合以上步骤，构建正则表达式的逻辑如下：

const str = 'tali Co OP';
// 1. 拆分字符串： ['tali', 'Co', 'OP']
const words = str.split(' ');
// 2. 连接单词： 'tali.*?\\bCo.*?\\bOP'
const joinedWords = words.join('.*?\\b');
// 3. 添加起始单词边界并创建正则表达式： \\btali.*?\\bCo.*?\\bOP
const regexp = new RegExp('\\b' + joinedWords, 'i');

2.2 代码实现

基于上述正则表达式构建逻辑，我们可以编写一个通用的搜索函数：

/**
 * 根据灵活的搜索条件过滤对象数组。
 * 支持单词/多词的前缀匹配和包含匹配（基于单词边界）。
 *
 * @param {Array} arr 要过滤的对象数组。
 * @param {string} str 用户输入的搜索字符串。
 * @returns {Array} 过滤后的对象数组。
 */
function search(arr, str) {
    // 如果搜索字符串为空，则返回原始数组
    if (!str || str.trim() === '') {
        return arr;
    }

    // 1. 将搜索字符串按空格拆分成单词
    const searchWords = str.trim().split(' ');

    // 2. 使用 '.*?\\b' 连接单词，并确保每个单词都在单词边界开始
    //    \\b 确保第一个单词从单词边界开始匹配
    //    .*?\\b 确保后续单词也在单词边界开始，且中间可有任意字符
    const pattern = '\\b' + searchWords.join('.*?\\b');

    // 3. 创建正则表达式对象，'i' 标志表示不区分大小写
    const regexp = new RegExp(pattern, 'i');

    // 4. 使用 filter 方法对数组进行过滤
    return arr.filter((item) => regexp.test(item.name));
}
3. 使用示例
现在，我们使用上面定义的 test 数组和 search 函数来验证其功能：
const test = [
    { id: 1, name: 'Taliparamba Co Op Hospital' },
    { id: 1, name: 'Athikkal Saw Mill,Kallai' },
    { id: 1, name: 'Marhaba Ice Plant Atholi' },
];

// 示例 1: 单词前缀匹配
// 搜索 'tali'，预期匹配 'Taliparamba Co Op Hospital'
console.log('搜索 "tali":', search(test, 'tali'));
// 输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]

// 示例 2: 多词模糊匹配
// 搜索 'tali Co OP'，预期匹配 'Taliparamba Co Op Hospital'
console.log('搜索 "tali Co OP":', search(test, 'tali Co OP'));
// 输出: [{ id: 1, name: 'Taliparamba Co Op Hospital' }]

// 示例 3: 单词包含匹配 (基于单词边界)
// 搜索 'ath'，预期匹配 'Athikkal Saw Mill,Kallai' 和 'Marhaba Ice Plant Atholi'
console.log('搜索 "ath":', search(test, 'ath'));
// 输出: [
//   { id: 1, name: 'Athikkal Saw Mill,Kallai' },
//   { id: 1, name: 'Marhaba Ice Plant Atholi' }
// ]

// 示例 4: 搜索空字符串或空白字符串
console.log('搜索 "":', search(test, ''));
// 输出: 原始数组，即 test

console.log('搜索 "   ":', search(test, '   '));
// 输出: 原始数组，即 test
从示例输出可以看出，search 函数成功地处理了单词前缀匹配、多词模糊匹配以及单词包含匹配的需求。
4. 注意事项
  • 性能考量：对于非常大的数组（数万甚至数十万条数据）和复杂的正则表达式，频繁地执行 filter 和 RegExp.test 可能会有性能开销。在这些场景下，可以考虑以下优化：
    • 预处理数据：如果 name 字段是固定的，可以提前生成一个用于搜索的规范化字符串（例如，全部小写，移除特殊字符），或者构建一个搜索索引（如倒排索引）。
    • 防抖/节流：在用户输入时，使用防抖（debounce）或节流（throttle）来限制搜索函数的调用频率。
  • 特殊字符处理：如果搜索字符串 str 可能包含正则表达式的特殊字符（如 ., *, +, ?, (, ), [, ], {, }, |, ^, $, \\），并且希望它们被当作字面量字符而不是正则元字符来匹配，则需要在构建 pattern 之前对 str 进行转义。例如：
    function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& 表示匹配到的完整字符串
}
// const pattern = '\\b' + searchWords.map(escapeRegExp).join('.*?\\b');
    本教程中的 \\b 和 .*? 是我们主动引入的正则元字符，因此不需要转义。但用户输入的 str 如果含有这些字符，则需要考虑转义。
  • 大小写敏感性：当前方案通过 i 标志实现了不区分大小写。如果需要区分大小写，只需移除 i 标志即可。
5. 总结
通过巧妙地结合 JavaScript 的 split(), join() 方法和正则表达式的 RegExp 构造函数，我们成功实现了一个高度灵活的对象数组过滤函数。该函数能够有效处理单词或多词的前缀匹配和包含匹配，并能自动忽略大小写，极大地提升了用户搜索体验。掌握这种利用正则表达式动态构建搜索模式的技巧，对于开发交互性强、功能丰富的搜索和过滤功能至关重要。
文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript多条件模糊筛选对象数组技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。
                
                

                                    

                                

                                        

                        
                            三分钟学会Gamma炫酷PPT制作方法三分钟学会Gamma炫酷PPT制作方法                        
                        

                            
上一篇

                            
三分钟学会Gamma炫酷PPT制作方法

                        

                    

                                        

                        
                            免费PPT模板推荐可直接使用案例分享
                        
                        

                            
下一篇

                            
免费PPT模板推荐可直接使用案例分享

                        

                    

                                    

            
        
                

            

                

                    查看更多
                    
最新文章

                

            

            
        

    
    

        
        

            

                查看更多
                
课程推荐

            

            
    
                                
  • 
                    
                        前端进阶之JavaScript设计模式
                                            
                    
    
                        
    前端进阶之JavaScript设计模式
    
                        
    
                            设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。                        
    
                        
    543次学习
    
                    
    
                
    • 
                                
  • 
                    
                        GO语言核心编程课程
                                            
                    
    
                        
    GO语言核心编程课程
    
                        
    
                            本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。                        
    
                        
    516次学习
    
                    
    
                
    • 
                                
  • 
                    
                        简单聊聊mysql8与网络通信
                                            
                    
    
                        
    简单聊聊mysql8与网络通信
    
                        
    
                            如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让                        
    
                        
    500次学习
    
                    
    
                
    • 
                                
  • 
                    
                        JavaScript正则表达式基础与实战
                                            
                    
    
                        
    JavaScript正则表达式基础与实战
    
                        
    
                            在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。                        
    
                        
    487次学习
    
                    
    
                
    • 
                                
  • 
                    
                        从零制作响应式网站—Grid布局
                                            
                    
    
                        
    从零制作响应式网站—Grid布局
    
                        
    
                            本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。                        
    
                        
    485次学习
    
                    
    
                
    • 
                            

        

        

        

            查看更多
            
AI推荐

        

        
    
                        
  • 
                
                    ljg-skills - 
                
                
    
                    
    ljg-skills
    
                    
    
                        ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。                    
    
                    
    2524次使用
    
                
    
            
    • 
                        
  • 
                
                    MELO音乐 - AI 音乐生成平台，支持多模态创作能力
                
                
    
                    
    MELO音乐
    
                    
    
                        MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！                    
    
                    
    2335次使用
    
                
    
            
    • 
                        
  • 
                
                    UniScribe - AI 免费在线音视频转文字平台
                
                
    
                    
    UniScribe
    
                    
    
                        UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。                    
    
                    
    2278次使用
    
                
    
            
    • 
                        
  • 
                
                    剧云 - 免费 AI 智能中文剧本创作平台
                
                
    
                    
    剧云
    
                    
    
                        剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。                    
    
                    
    2478次使用
    
                
    
            
    • 
                        
  • 
                
                    万象有声 - AI 一站式有声内容创作平台
                
                
    
                    
    万象有声
    
                    
    
                        万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！                    
    
                    
    2455次使用
    
                
    
            
    • 
                    

    

        
        

            

                查看更多
                
相关文章

            

            
        

    




    

        

            

                关于我们
                免责声明
                意见反馈
                联系我们
                内容提交
                 手册
            

            
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！

            

                技术交流群
            

            

                Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
            

        

        

            
    
                
                
  • 
                    
    
                        Golang学习网
                    
    
                    
    关注公众号
    
                    
    Golang学习网
    
                
    • 
                
    
            

        

        

    







    

      

        
      

      
      
      
      

        

        

          
微信登录更方便

        

        

          
    
            
  • 密码登录
    •  
            
  • 注册账号
    • 
          

          

            

              

                
                                

                  
                

                

                  
                

                

                  

                    
                  

                
                    
                
              

                

                  忘记密码
                

                

                  
                

              

            

            
          

        

        
登录即同意 用户协议 和 隐私政策

      

		
		

			

			
返回登录

			

			
    
				
  • 重置密码
    • 
			

			

				

				

          

          
        

					
          

            

              
            

            
                发送验证码