多维度产品筛选是电商、库存管理等系统中非常核心的功能，用户往往需要同时设置多个筛选条件，并且条件之间可能存在“同时满足”和“满足其一即可”两种逻辑关系，也就是AND和OR逻辑。合理实现这两种逻辑的组合，能让筛选功能更贴合用户的实际使用场景。
筛选条件的结构设计
要实现带AND/OR逻辑的筛选，首先需要设计合理的条件存储结构。我们可以把筛选条件分为两组，一组是AND逻辑的条件集合，一组是OR逻辑的条件集合，每个条件包含筛选的维度和对应的值。
以下是一个基础的条件结构示例：
// 筛选条件结构
const filterConditions = {
andConditions: [
{ dimension: 'category', value: '手机' },
{ dimension: 'price', value: [1000, 3000] }
],
orConditions: [
{ dimension: 'brand', value: '华为' },
{ dimension: 'brand', value: '小米' }
]
};
AND/OR逻辑的处理规则
筛选时需要先处理AND逻辑的条件，再处理OR逻辑的条件，具体规则如下：
- AND逻辑：产品必须同时满足所有AND组中的条件，才会进入下一步OR逻辑的判断
- OR逻辑：产品只要满足OR组中的任意一个条件，就可以通过筛选，如果OR组为空，则默认通过OR逻辑判断
核心筛选函数实现
接下来我们实现核心的筛选函数，首先需要一个判断单个条件是否匹配的方法，然后按照AND、OR的顺序依次校验产品。
单个条件匹配方法
不同的维度匹配规则可能不同，比如价格维度是范围匹配，品牌、分类是精确匹配，我们可以先定义不同维度的匹配规则：
// 单个条件匹配方法
function matchSingleCondition(product, condition) {
const { dimension, value } = condition;
switch(dimension) {
case 'category':
// 分类精确匹配
return product.category === value;
case 'brand':
// 品牌精确匹配
return product.brand === value;
case 'price':
// 价格范围匹配，value是[min, max]的数组
const [min, max] = value;
return product.price >= min && product.price <= max;
case 'stock':
// 库存数量匹配，value是最小库存要求
return product.stock >= value;
default:
return false;
}
}
完整筛选函数
结合AND和OR逻辑的处理规则，实现完整的筛选函数：
// 多维度筛选主函数
function multiDimensionFilter(products, filterConditions) {
const { andConditions, orConditions } = filterConditions;
return products.filter(product => {
// 第一步：校验AND逻辑条件，所有AND条件都必须满足
const andMatched = andConditions.every(condition => {
return matchSingleCondition(product, condition);
});
// 如果不满足AND条件，直接返回false
if (!andMatched) return false;
// 第二步：校验OR逻辑条件，OR条件为空则默认通过，否则满足任意一个即可
if (orConditions.length === 0) return true;
const orMatched = orConditions.some(condition => {
return matchSingleCondition(product, condition);
});
return orMatched;
});
}
功能测试示例
我们准备一组测试产品数据，然后调用筛选函数验证功能是否符合预期：
// 测试产品数据
const productList = [
{ id: 1, name: '华为Mate 50', category: '手机', brand: '华为', price: 2499, stock: 100 },
{ id: 2, name: '小米14', category: '手机', brand: '小米', price: 2999, stock: 50 },
{ id: 3, name: '华为平板', category: '平板', brand: '华为', price: 1999, stock: 30 },
{ id: 4, name: '小米电视', category: '电视', brand: '小米', price: 2499, stock: 20 },
{ id: 5, name: 'OPPO Reno 10', category: '手机', brand: 'OPPO', price: 1999, stock: 80 }
];
// 筛选条件：分类是手机（AND），价格在1000-3000之间（AND），品牌是华为或者小米（OR）
const testFilterConditions = {
andConditions: [
{ dimension: 'category', value: '手机' },
{ dimension: 'price', value: [1000, 3000] }
],
orConditions: [
{ dimension: 'brand', value: '华为' },
{ dimension: 'brand', value: '小米' }
]
};
const result = multiDimensionFilter(productList, testFilterConditions);
console.log('筛选结果：', result);
// 预期输出id为1和2的产品
扩展优化建议
上述实现是基础版本，实际业务中可以根据需求做进一步优化：
- 支持OR条件组嵌套，比如多个OR条件组之间再用AND逻辑连接，适配更复杂的筛选场景
- 增加条件维度的动态配置，不需要硬编码匹配规则，通过配置映射表处理不同维度的匹配逻辑
- 如果产品数据量较大，可以加入索引优化，减少遍历次数提升筛选性能
JavaScript多维度筛选AND_OR逻辑产品筛选修改时间：2026-07-09 10:27:31