使用JavaScript过滤数据未得预期结果，请求排查代码问题

你的代码无法得到预期结果，核心存在两个关键问题，同时你提到的“实际返回全部数据”大概率是代码细节与描述存在偏差（比如大小写、类型或逻辑判断符写错）：

问题1：大小写严格匹配导致color过滤失效 #

JavaScript的Array.prototype.includes方法对字符串是严格区分大小写的。你定义的过滤器中color: 'black'是小写，但数据里的color数组存储的是首字母大写的'Black'，因此['Black', 'white'].includes('black')会返回false，原本符合条件的条目会被错误过滤。

问题2：类型不匹配导致size过滤失效 #

过滤器中size: '40'是字符串类型，但数据里的size数组存储的是数字类型的40。includes使用**严格相等（===）**进行判断，字符串'40'和数字40并不相等，所以[30, 40, 50].includes('40')会返回false，同样导致符合条件的条目被错误过滤。

修正后的代码 #

针对上述问题，我们需要统一大小写和数据类型后再进行匹配：

const filters = {color: 'black', size: '40'}
const data = [  
  { 
    id: 1,
    name: "Good Engine001",
    categories: ['machine'],
    color: ['Black', 'white'],
    size: [30, 40, 50]
  },
  { 
    id: 2,
    name: "Good Plane",
    categories: ['machine', 'plane'],
    color: ['Grey', 'white'],
    size: [10, 30, 50]
  },
  { 
    id: 3,
    name: "Good Chair001",
    categories: ['furniture', 'chair'],
    color: ['Brown', 'Black'],
    size: [3, 5, 40]
  }
];

const filteredProducts = data.filter((item) =>
    Object.entries(filters).every(([key, filterValue]) => {
        const itemValues = item[key];
        if (key === 'color') {
            // 统一转成小写进行不区分大小写匹配
            return itemValues.some(val => val.toLowerCase() === filterValue.toLowerCase());
        } else if (key === 'size') {
            // 将过滤器值转成数字，匹配数组中的数字
            const numFilterValue = Number(filterValue);
            return itemValues.includes(numFilterValue);
        }
        // 其他字段保持严格匹配
        return itemValues.includes(filterValue);
    })
);

console.log(filteredProducts); // 输出id为1和3的条目

关于“实际返回全部数据”的说明 #

如果你的代码确实返回了全部数据，可能是以下原因之一：

• 误将every写成了some（此时只要有一个条件满足就保留，但你的场景中item2两个条件都不满足，也不该被保留）
• 过滤器或数据的实际值与你描述的不一致（比如过滤器的color是'Black'、size是数字40，或者item2的color/size误写为包含过滤器值）

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