如何在Angular 5中实现多属性对象数组过滤器？

嘿，这就帮你把multiFilter函数完善好！这个函数的核心逻辑是：对数组里的每个对象，检查它是否满足过滤对象中所有指定属性的匹配条件。

完整实现代码 #

function multiFilter(array, filters) {
  // 获取所有过滤属性的键名
  const filterKeys = Object.keys(filters);
  
  // 用Array.filter遍历产品数组，逐个检查是否符合条件
  return array.filter(item => {
    // 检查每个过滤属性是否匹配
    return filterKeys.every(key => {
      // 如果过滤器中该属性的值为空/未定义，直接跳过（不过滤）
      if (!filters[key]) return true;
      // 匹配当前对象的对应属性值
      return item[key] === filters[key];
    });
  });
}

代码逻辑拆解 #

• 第一步：用Object.keys(filters)拿到所有需要过滤的属性名（比如brand、color、name）。
• 第二步：用array.filter()筛选符合条件的产品。
• 第三步：在过滤回调里，用filterKeys.every()确保所有过滤条件都被满足：
  • 如果过滤器里某个属性的值是空的（比如用户没选这个属性），直接返回true，不对这个属性做过滤。
  • 否则，检查产品的对应属性值是否和过滤器里的取值完全相等。

示例用法 #

假设我们有这样的产品数组：

const products = [
  { name: "T恤", brand: "Nike", color: "red" },
  { name: "裤子", brand: "Adidas", color: "blue" },
  { name: "帽子", brand: "Nike", color: "red" },
  { name: "鞋子", brand: "Puma", color: "black" }
];

当用户选择过滤条件{ brand: "Nike", color: "red" }时：

const filteredProducts = multiFilter(products, { brand: "Nike", color: "red" });
// 结果会返回：[{ name: "T恤", brand: "Nike", color: "red" }, { name: "帽子", brand: "Nike", color: "red" }]

如果用户只选了品牌过滤{ brand: "Adidas" }：

const filteredProducts = multiFilter(products, { brand: "Adidas" });
// 结果返回：[{ name: "裤子", brand: "Adidas", color: "blue" }]

扩展优化（可选） #

如果需要支持模糊匹配（比如名称包含某个关键词）或者多值匹配（比如颜色可选红或蓝），可以修改every里的判断逻辑：

// 支持多值匹配（比如filters.color是["red", "blue"]）
return filterKeys.every(key => {
  const filterValue = filters[key];
  if (!filterValue) return true;
  // 如果过滤器值是数组，检查对象属性是否在数组中
  if (Array.isArray(filterValue)) {
    return filterValue.includes(item[key]);
  }
  // 模糊匹配（比如名称包含关键词）
  if (typeof filterValue === 'string' && key === 'name') {
    return item[key].toLowerCase().includes(filterValue.toLowerCase());
  }
  // 默认精确匹配
  return item[key] === filterValue;
});

这样函数的灵活性就更高啦！

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