如何实现可扩展的JavaScript数组对象属性过滤函数？

原生JavaScript实现方案 #

原函数的问题在于硬编码了具体属性的判断逻辑，导致新增过滤条件时必须手动修改函数。可以通过动态遍历过滤条件的键值对实现自动适配，核心思路如下：

1. 提取过滤对象中所有非空的键值对（避免无意义的空值判断）
2. 对每个数组项，验证其是否满足所有过滤条件

优化后的代码：

const items = [
  { prop1: 'Jotahan', prop2: 'London', prop3: '1234567' },
  { prop1: 'Jones', prop2: 'Paris', prop3: '987' }
];

const filters = { prop2: 'Paris', prop3: '987' };

const handleFilters = (items, filters) => {
  // 获取过滤条件中有效的键值对（排除undefined、null、空字符串等假值）
  const filterEntries = Object.entries(filters).filter(([_, value]) => Boolean(value));
  
  // 无有效过滤条件时直接返回原数组副本
  if (filterEntries.length === 0) return [...items];
  
  return items.filter(item => {
    // 验证当前项是否满足所有过滤规则
    return filterEntries.every(([key, value]) => item[key] === value);
  });
};

// 测试调用
console.log(handleFilters(items, filters)); // 输出 [{ prop1: 'Jones', prop2: 'Paris', prop3: '987' }]

核心优势 #

• 完全可扩展：新增过滤属性（如prop1）时，只需更新filters对象，无需改动过滤函数
• 逻辑简洁：用Object.entries和Array.every替代冗余的if分支判断
• 鲁棒性强：自动忽略过滤条件中的空值项，避免无效判断

Lodash辅助实现（可选） #

如果使用Lodash，可以借助_.pickBy和_.matches简化代码，同样具备扩展性：

const handleFilters = (items, filters) => {
  // 过滤空值条件，生成匹配规则
  const validFilters = _.pickBy(filters, Boolean);
  return _.filter(items, _.matches(validFilters));
};

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