如何使用JavaScript实现高效的商品筛选功能？

JS商品筛选

1. 简介

在电商平台中，商品筛选功能是非常重要的一环，通过筛选功能，用户可以快速地找到自己需要的商品，提高购物体验，本文将介绍如何使用JavaScript实现简单的商品筛选功能。

2. 数据结构

我们需要定义一个商品列表，每个商品包含名称、价格、分类等信息，这里我们使用数组来存储商品列表：

const products = [
  { name: '商品1', price: 100, category: '电子产品' },
  { name: '商品2', price: 200, category: '家居用品' },
  { name: '商品3', price: 300, category: '电子产品' },
  // ...
];

3. 筛选函数

我们需要编写一个筛选函数，根据用户输入的条件对商品列表进行筛选，这里我们使用Array的filter方法来实现：

function filterProducts(products, conditions) {
  return products.filter(product => {
    for (const key in conditions) {
      if (conditions[key] !== product[key]) {
        return false;
      }
    }
    return true;
  });
}

这个函数接收两个参数，一个是商品列表，另一个是筛选条件，筛选条件是一个对象，包含用户输入的筛选条件，函数返回一个新的数组，包含符合条件的商品。

4. 使用示例

假设用户想要筛选出价格小于等于200的电子产品，我们可以这样调用筛选函数：

const filteredProducts = filterProducts(products, { price: 200, category: '电子产品' });
console.log(filteredProducts);

输出结果：

[ { name: '商品1', price: 100, category: '电子产品' } ]

5. 相关问题与解答

问题1：如何实现多条件筛选？

答：在筛选函数中，我们使用了for...in循环来遍历筛选条件对象，当所有条件都满足时，返回true，表示该商品符合筛选条件，只需传入一个包含多个筛选条件的对象即可实现多条件筛选。

筛选价格小于等于200且属于家居用品的商品：

const filteredProducts = filterProducts(products, { price: 200, category: '家居用品' });

问题2：如何实现区间筛选？

答：对于区间筛选，我们可以在筛选条件对象中使用数组来表示区间，筛选价格在100到200之间的商品：

const filteredProducts = filterProducts(products, { price: [100, 200] });

在筛选函数中，我们需要判断筛选条件值的类型，如果是数组，表示区间筛选，需要判断商品属性值是否在区间内。