js实现多条件筛选数据

实现多条件筛选数据的方法

在JavaScript中，可以通过多种方式实现多条件筛选数据。以下是几种常见的方法：

使用Array.filter()方法

通过Array.filter()方法可以轻松实现多条件筛选。该方法会创建一个新数组，包含通过所提供函数测试的所有元素。

const data = [
  { id: 1, name: 'Apple', category: 'fruit', price: 1.2 },
  { id: 2, name: 'Carrot', category: 'vegetable', price: 0.8 },
  { id: 3, name: 'Banana', category: 'fruit', price: 1.5 }
];

const filters = {
  category: 'fruit',
  price: value => value < 1.4
};

const filteredData = data.filter(item => 
  Object.entries(filters).every(([key, condition]) => 
    typeof condition === 'function' 
      ? condition(item[key]) 
      : item[key] === condition
  )
);

动态构建筛选条件

对于更灵活的多条件筛选，可以动态构建筛选条件函数：

function multiFilter(data, conditions) {
  return data.filter(item => {
    for (const key in conditions) {
      if (conditions[key] === undefined) continue;
      if (typeof conditions[key] === 'function') {
        if (!conditions[key](item[key])) return false;
      } else {
        if (item[key] !== conditions[key]) return false;
      }
    }
    return true;
  });
}

const conditions = {
  category: 'fruit',
  price: price => price > 1
};
const result = multiFilter(data, conditions);

使用Lodash等工具库

Lodash提供了.filter和.conforms等方法简化多条件筛选：

import _ from 'lodash';

const filtered = _.filter(data, _.conforms({
  category: val => val === 'fruit',
  price: val => val < 1.4
}));

处理复杂条件

对于包含AND/OR逻辑的复杂条件，可以构建更复杂的筛选函数：

function complexFilter(data, conditions) {
  return data.filter(item => {
    const andConditions = conditions.and || [];
    const orConditions = conditions.or || [];

    const andPass = andConditions.every(cond => 
      Object.entries(cond).every(([key, val]) => 
        typeof val === 'function' ? val(item[key]) : item[key] === val
      )
    );

    const orPass = orConditions.length === 0 || 
      orConditions.some(cond => 
        Object.entries(cond).every(([key, val]) => 
          typeof val === 'function' ? val(item[key]) : item[key] === val
        )
      );

    return andPass && orPass;
  });
}

性能优化建议

对于大数据集，可以考虑以下优化措施：

• 对数据进行预处理或索引
• 使用Web Worker进行后台筛选
• 实现延迟筛选或分批筛选
• 使用Memoization缓存筛选结果

实际应用示例

以下是一个完整的示例，展示如何在React组件中实现多条件筛选：

function ProductList({ products }) {
  const [filters, setFilters] = useState({
    category: '',
    minPrice: 0,
    maxPrice: Infinity
  });

  const filteredProducts = products.filter(product => {
    return (
      (filters.category === '' || product.category === filters.category) &&
      product.price >= filters.minPrice &&
      product.price <= filters.maxPrice
    );
  });

  return (
    <div>
      {/* 筛选控件 */}
      <input 
        type="text" 
        placeholder="Category" 
        onChange={e => setFilters({...filters, category: e.target.value})}
      />
      <input 
        type="number" 
        placeholder="Min price" 
        onChange={e => setFilters({...filters, minPrice: Number(e.target.value)})}
      />
      <input 
        type="number" 
        placeholder="Max price" 
        onChange={e => setFilters({...filters, maxPrice: Number(e.target.value)})}
      />

      {/* 产品列表 */}
      {filteredProducts.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>Price: ${product.price}</p>
        </div>
      ))}
    </div>
  );
}

这些方法提供了从简单到复杂的多条件筛选实现方案，可以根据具体需求选择合适的方法。