ReactJS多条件过滤求助：如何实现JSON数据多字段搜索

嘿，这需求我之前做项目的时候刚好碰到过！要从单字段（name）搜索扩展到同时支持company和email字段，只需要调整一下filter回调里的判断逻辑就行，很简单的。

核心思路 #

原来的代码只判断了name字段是否匹配搜索字符串，现在我们只需要用**逻辑或（||）**把company和email的判断也加进去，只要三个字段里有一个匹配，这条数据就会被保留下来。另外建议把搜索字符串也统一转成小写，这样搜索的时候就不会区分大小写，用户体验更好～

修改后的完整代码 #

if(searchString.length > 0){
  // 先把搜索字符串转成小写，统一匹配规则
  const lowerCaseSearch = searchString.toLowerCase();
  contactsData = contactsData.filter(function(contact){
    return contact.name.toLowerCase().includes(lowerCaseSearch) ||
           // 用可选链?.避免字段不存在时报错
           (contact.company?.toLowerCase().includes(lowerCaseSearch)) ||
           (contact.email?.toLowerCase().includes(lowerCaseSearch));
  });
}

细节说明 #

1. 为什么用includes而不是match？
   match是基于正则表达式的匹配，如果用户输入的搜索字符串里包含正则特殊字符（比如.、*），会导致匹配异常。而includes是简单的字符串包含判断，更适合这种基础搜索场景，安全性更高。如果你的需求是支持正则搜索，那再换回match也没问题。

2. 可选链?.的作用
   如果你的contactsData里可能存在某些字段缺失的情况（比如有的联系人没有填写company），用?.可以避免Cannot read properties of undefined (reading 'toLowerCase')这类报错。如果确定所有字段都存在，那可以去掉?.，直接写contact.company.toLowerCase()。

3. 进一步优化（可选）
   如果以后还要加更多搜索字段，可以把需要搜索的字段名放到一个数组里，用some方法来遍历判断，这样代码更易维护：

   if(searchString.length > 0){
     const lowerCaseSearch = searchString.toLowerCase();
     const searchFields = ['name', 'company', 'email'];
     contactsData = contactsData.filter(contact => {
       return searchFields.some(field => {
         return contact[field]?.toLowerCase().includes(lowerCaseSearch);
       });
     });
   }
   

   这样以后要加新字段，只需要往searchFields数组里加字段名就行，不用修改filter的判断逻辑～

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