JavaScript过滤对象与数组时filter条件逻辑及代码解析

先贴原代码方便对照：

setFilteredProducts(
    products.filter((item) =>
        Object.entries(filters).every(([key, value]) =>
            item[key].includes(value)
        )
    )
);

这是React项目里非常常见的前端本地筛选实现，整体作用是根据用户选中的筛选项，从全量商品数据里过滤出符合要求的结果，更新到页面状态里渲染。逐段规则如下：

• setFilteredProducts()：是React通过useState定义的状态更新函数，括号内计算得到的最终筛选结果，会被赋值给对应的filteredProducts状态，自动触发页面重渲染展示筛选后的商品列表。
• products.filter((item) => {})：就是你已经了解的数组筛选方法，会遍历全量商品数组products的每一项（item就是当前遍历到的单个商品对象），只有回调函数返回true的商品，才会被保留到最终的结果数组里。
• Object.entries(filters).every(...)：这部分是多条件判断的核心
  • Object.entries(filters)会把存储所有筛选规则的filters对象，转成由「[字段名, 筛选值]」组成的二维数组。举个例子，如果filters值为{category: "数码", brand: "苹果"}，转换后结果就是[["category", "数码"], ["brand", "苹果"]]。
  • 后面的.every()是数组的全真判断方法：只有数组内所有元素都满足后续匹配规则，整个方法才返回true；只要有一个条件不满足，立刻返回false。也就是说这里实现的是「所有筛选项必须同时匹配」的AND逻辑，不是满足任意一个即可的OR逻辑。
• item[key].includes(value)：这是单个筛选项的匹配规则
  • item[key]是取当前商品对应筛选字段的属性值，比如当前遍历到的key是category，就取这个商品的分类字段值。
  • .includes(value)用来判断这个属性值是否包含当前要匹配的筛选值。

  注意：这段写法默认item[key]的类型是字符串或者数组，如果字段值是数字、布尔值这类不支持includes方法的原始类型，运行时会报错，教程场景下一般默认对应字段存的是多值数组（比如商品多标签、多分类）或者字符串。

实际运行示例 #

假设现有商品数据和筛选条件如下：

const products = [
  {id: 1, name: "iPhone 15", category: ["手机", "数码"], brand: "苹果"},
  {id: 2, name: "MacBook Air", category: ["电脑", "数码"], brand: "苹果"},
  {id: 3, name: "小米14", category: ["手机", "数码"], brand: "小米"}
]
const filters = {category: "手机", brand: "苹果"}

执行逻辑：

1. 遍历id=1的商品：检查两个条件，category包含"手机"、brand包含"苹果"，全部满足，保留
2. 遍历id=2的商品：检查category字段，值里没有"手机"，every直接返回false，被过滤
3. 遍历id=3的商品：检查brand字段，值为"小米"不包含"苹果"，every返回false，被过滤
4. 最终筛选结果只有id=1的iPhone 15，会被传入setFilteredProducts更新页面状态。

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