当前位置：首页 > JavaScript

js实现多条件筛选数据

2026-03-01 20:47:12JavaScript

使用 Array.filter() 方法实现多条件筛选

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

const data = [
  { name: 'Apple', category: 'fruit', price: 1.2, stock: 100 },
  { name: 'Banana', category: 'fruit', price: 0.8, stock: 50 },
  { name: 'Carrot', category: 'vegetable', price: 0.5, stock: 200 }
];

const filters = {
  category: 'fruit',
  price: (value) => value < 1,
  stock: (value) => value > 30
};

const filteredData = data.filter(item => {
  return Object.entries(filters).every(([key, condition]) => {
    if (typeof condition === 'function') {
      return condition(item[key]);
    }
    return item[key] === condition;
  });
});

使用动态构建筛选函数

对于更复杂的筛选需求，可以动态构建筛选函数，使代码更具灵活性。

js实现多条件筛选数据

function createFilterFunction(filters) {
  return function(item) {
    for (const [key, condition] of Object.entries(filters)) {
      if (condition === null || condition === undefined) continue;

      if (typeof condition === 'function') {
        if (!condition(item[key])) return false;
      } else if (Array.isArray(condition)) {
        if (!condition.includes(item[key])) return false;
      } else {
        if (item[key] !== condition) return false;
      }
    }
    return true;
  };
}

const complexFilters = {
  category: ['fruit', 'vegetable'],
  price: value => value < 1.5,
  stock: value => value > 40
};

const filterFn = createFilterFunction(complexFilters);
const result = data.filter(filterFn);

使用第三方库实现高级筛选

对于大型项目，可以考虑使用 lodash 等工具库提供的筛选功能，它们通常性能更好且功能更全面。

js实现多条件筛选数据

import _ from 'lodash';

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

// 或者使用 _.conforms 实现更灵活的筛选
const conformsFilter = _.conforms({
  category: val => val === 'fruit',
  price: val => val < 1,
  stock: val => val > 50
});

const conformsResult = _.filter(data, conformsFilter);

处理异步数据筛选

当需要从API获取数据后进行筛选时，可以结合Promise和filter方法。

async function fetchAndFilter(url, filters) {
  const response = await fetch(url);
  const data = await response.json();

  return data.filter(item => {
    return Object.entries(filters).every(([key, condition]) => {
      if (typeof condition === 'function') {
        return condition(item[key]);
      }
      return item[key] === condition;
    });
  });
}

// 使用示例
fetchAndFilter('/api/products', { category: 'fruit' })
  .then(filteredProducts => {
    console.log(filteredProducts);
  });

性能优化建议

对于大数据集，应考虑以下优化策略：

使用Web Worker在后台线程中进行筛选
实现防抖机制避免频繁筛选
对数据进行索引或预处理
使用虚拟滚动等技术只渲染可见项

// 简单防抖实现示例
function debounceFilter(data, filters, delay = 300) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      const result = data.filter(/* 筛选逻辑 */);
      // 处理结果
    }, delay);
  };
}

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