js 多条件查询

JS 多条件查询：全面解析与实践

在前端开发中，经常会遇到需要根据多个条件对数据进行筛选查询的场景，使用 JavaScript 可以实现灵活且高效的多条件查询功能，无论是在处理本地数据还是与后端进行交互时都极为有用，本文将深入探讨 JS 实现多条件查询的方法、技巧以及相关示例，帮助开发者更好地掌握这一重要技能。

一、数据准备

假设我们有一组产品数据，存储在一个数组中，每个产品对象包含id、name、category、price 和stock 等属性，如下所示：

二、单条件查询示例

先来看一个简单的单条件查询，比如根据产品类别查询所有“电子”类产品：

function filterByCategory(products, category) {
    return products.filter(product => product.category === category);
}
const electronicProducts = filterByCategory(products, '电子');
console.log(electronicProducts);

上述代码中，filter 方法会遍历products 数组，对于每个产品对象，如果其category 属性等于传入的category 参数（这里是“电子”），则保留该元素，最终返回一个包含所有符合条件的产品的新数组。

三、多条件查询原理

多条件查询基于与单条件查询类似的逻辑，只是需要同时考虑多个条件，通常可以使用逻辑与（&&）操作符来组合多个条件，要查询价格大于 400 且库存大于 10 的产品，可以这样写：

function filterByPriceAndStock(products, minPrice, minStock) {
    return products.filter(product => product.price > minPrice && product.stock > minStock);
}
const filteredProducts = filterByPriceAndStock(products, 400, 10);
console.log(filteredProducts);

filter 方法中的回调函数会对每个产品进行检查，只有当产品的price 大于minPrice 并且stock 大于minStock 时，该产品才会被包含在返回的结果数组中。

四、动态多条件查询函数

为了让多条件查询更加灵活通用，我们可以创建一个可以接受多个条件的函数，以下是一个示例函数，它接受一个对象作为条件参数，对象的键对应产品的属性，值是要匹配的值：

function dynamicFilter(products, conditions) {
    return products.filter(product => {
        for (let key in conditions) {
            if (product[key] !== conditions[key]) {
                return false;
            }
        }
        return true;
    });
}
// 示例用法
const conditions = { category: '家居', price: 400, stock: 8 };
const result = dynamicFilter(products, conditions);
console.log(result);

这个dynamicFilter 函数会遍历conditions 对象中的每个键值对，并检查产品对象是否满足所有指定的条件，如果有任何一个条件不满足，就排除该产品，否则将其包含在结果数组中。

五、复杂条件查询示例

有时可能需要进行更复杂的条件判断，比如查询价格在某个区间内或者类别属于某些特定值集合的产品，以下是一个示例：

function complexFilter(products, conditions) {
    return products.filter(product => {
        let isMatch = true;
        if (conditions.priceRange) {
            const [minPrice, maxPrice] = conditions.priceRange;
            if (product.price < minPrice || product.price > maxPrice) {
                isMatch = false;
            }
        }
        if (conditions.categories) {
            if (!conditions.categories.includes(product.category)) {
                isMatch = false;
            }
        }
        return isMatch;
    });
}
// 示例用法
const complexConditions = {
    priceRange: [300, 700],
    categories: ['电子', '家居']
};
const complexResult = complexFilter(products, complexConditions);
console.log(complexResult);

在这个例子中，complexFilter 函数首先初始化一个isMatch 标志为true，然后根据条件对象中的priceRange 和categories 属性进行相应的判断，如果产品的价格不在指定区间内或者类别不属于指定的集合，就将isMatch 设为false，最后返回isMatch 为true 的产品数组。

六、相关问题与解答

问题 1：如果数据量很大，多条件查询会不会导致性能问题？如何优化？

答：当数据量非常大时，多次遍历数组进行多条件查询可能会影响性能，可以采取以下优化措施：

索引优化：如果数据结构允许，提前对数据按照常用的查询条件建立索引，这样在查询时可以直接定位到符合条件的数据范围，减少遍历次数，对于分类数据，可以建立一个以类别为键，产品数组为值的对象，查询时直接通过类别获取相关产品数组再进行其他条件过滤。

节流与防抖：如果查询操作频繁触发（如用户在输入框中连续输入查询关键词），可以使用节流或防抖函数来限制查询的频率，避免不必要的计算，使用 lodash 库中的_.debounce 函数来包装查询函数，只在用户停止输入一段时间后才执行查询。

并行处理：对于一些独立的条件判断，可以考虑使用并行处理的方式，比如利用 JavaScript 的Promise.all 并行执行多个异步的条件检查任务，然后再汇小编总结果，但这种方法需要注意线程安全和数据一致性问题。

问题 2：如何在多条件查询中处理模糊查询，比如根据产品名称包含某个关键词进行查询？

答：要在多条件查询中实现模糊查询，可以在查询函数中添加对名称字段的特殊处理，以下是修改后的示例：

function fuzzyFilter(products, conditions) {
    return products.filter(product => {
        let isMatch = true;
        if (conditions.nameKeyword) {
            if (!product.name.includes(conditions.nameKeyword)) {
                isMatch = false;
            }
        }
        // 其他条件的处理...
        return isMatch;
    });
}
// 示例用法
const fuzzyConditions = { nameKeyword: '产' };
const fuzzyResult = fuzzyFilter(products, fuzzyConditions);
console.log(fuzzyResult);

在这个示例中，新增了对conditions.nameKeyword 的处理，使用includes 方法检查产品名称是否包含指定的关键词，这样就可以实现根据产品名称模糊查询的功能，同时还可以结合其他精确条件一起进行多条件查询。