React多条件产品过滤优化：如何实现一次性过滤而非多次过滤？

问题背景 #

面试中实现了多条件产品过滤功能，原代码通过多次调用filter逐个应用分类、评分、搜索过滤条件。但面试官指出，当产品数量较多时，多次遍历数组的方案性能不佳，需要改为单次完成所有条件的过滤。

单个filter结合&&的实现方式 #

核心思路是在一次filter遍历中，同时判断所有过滤条件，只有当元素满足所有生效的条件时才保留。对于未激活的条件（比如分类选了all、搜索框为空），直接返回true，不影响最终判断。

const filterData = () => {
  return products.filter(item => {
    // 分类匹配判断：未选择特定分类则跳过
    const matchesCategory = byCategory === 'all' 
      ? true 
      : item.category.toLowerCase() === byCategory.toLowerCase();
    
    // 评分匹配判断：未选择特定评分则跳过
    const matchesRating = byRating === 'all' 
      ? true 
      : Math.floor(item.rating.rate) == byRating;
    
    // 搜索匹配判断：搜索框为空则跳过
    const matchesSearch = bySearch === '' 
      ? true 
      : item.title.toLowerCase().includes(bySearch.toLowerCase());
    
    // 所有条件需同时满足
    return matchesCategory && matchesRating && matchesSearch;
  });
};

这种方式只需要遍历数组一次，每个元素仅做一轮条件判断，避免了多次filter带来的重复遍历开销，数据量越大，性能提升越明显。

其他更优扩展方案 #

动态组合过滤函数（灵活扩展版） #

如果后续需要频繁新增过滤条件，可以把每个生效的过滤规则封装成独立函数，存入数组后用every统一校验。这种方式的扩展性更强，新增条件时只需添加新的过滤函数，无需修改核心判断逻辑。

const filterData = () => {
  const activeFilters = [];
  
  // 按需添加分类过滤规则
  if (byCategory !== 'all') {
    activeFilters.push(item => item.category.toLowerCase() === byCategory.toLowerCase());
  }
  
  // 按需添加评分过滤规则
  if (byRating !== 'all') {
    activeFilters.push(item => Math.floor(item.rating.rate) == byRating);
  }
  
  // 按需添加搜索过滤规则
  if (bySearch !== '') {
    activeFilters.push(item => item.title.toLowerCase().includes(bySearch.toLowerCase()));
  }
  
  // 无过滤条件时直接返回原数组副本
  if (activeFilters.length === 0) return [...products];
  
  // 每个元素需通过所有激活的过滤规则
  return products.filter(item => activeFilters.every(filter => filter(item)));
};

利用短路逻辑优化判断性能 #

无论是哪种实现，都可以利用逻辑运算符的短路特性提前终止判断：比如当元素不满足分类条件时，&&会直接返回false，不再执行后续的评分和搜索判断，减少不必要的计算。

总结 #

• 基础优化：用单个filter+&&组合条件，实现单次遍历过滤，解决多次遍历的性能问题。
• 进阶方案：动态组合过滤函数，提升代码的可维护性和扩展性。
• 细节优化：利用短路逻辑减少无效计算，进一步提升性能。

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