js实现筛选数据功能

基本筛选功能实现

使用数组的filter方法可以快速实现基础筛选：

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

function filterByCategory(items, category) {
  return items.filter(item => item.category === category);
}

const fruits = filterByCategory(data, 'fruit');

多条件复合筛选

通过组合多个条件实现复杂筛选：

function multiFilter(items, conditions) {
  return items.filter(item => {
    return Object.entries(conditions).every(([key, value]) => {
      if (typeof value === 'function') {
        return value(item[key]);
      }
      return item[key] === value;
    });
  });
}

const result = multiFilter(data, {
  category: 'fruit',
  name: name => name.startsWith('A')
});

动态关键词搜索

实现不区分大小写的关键词搜索：

function keywordSearch(items, keyword, fields) {
  const lowerKeyword = keyword.toLowerCase();
  return items.filter(item => 
    fields.some(field => 
      String(item[field]).toLowerCase().includes(lowerKeyword)
    )
  );
}

const searched = keywordSearch(data, 'app', ['name', 'category']);

分页筛选实现

结合筛选与分页功能：

function paginatedFilter(items, filterFn, page, pageSize) {
  const filtered = filterFn ? items.filter(filterFn) : [...items];
  const total = filtered.length;
  const paginated = filtered.slice((page - 1) * pageSize, page * pageSize);

  return {
    data: paginated,
    total,
    page,
    totalPages: Math.ceil(total / pageSize)
  };
}

const pageResult = paginatedFilter(data, item => item.category === 'fruit', 1, 2);

性能优化建议

对于大型数据集考虑以下优化：

// 使用索引或Map预处理数据
const categoryIndex = data.reduce((acc, item) => {
  if (!acc[item.category]) acc[item.category] = [];
  acc[item.category].push(item);
  return acc;
}, {});

// Web Worker处理超大数据集
const worker = new Worker('filter-worker.js');
worker.postMessage({data, conditions});
worker.onmessage = e => console.log(e.data.result);

筛选器组件示例

实现可复用的筛选组件：

class DataFilter {
  constructor(data) {
    this.originalData = data;
    this.filteredData = [...data];
  }

  applyFilter(filterFn) {
    this.filteredData = this.originalData.filter(filterFn);
    return this;
  }

  reset() {
    this.filteredData = [...this.originalData];
    return this;
  }

  get results() {
    return this.filteredData;
  }
}

const filter = new DataFilter(data);
filter.applyFilter(item => item.id > 1);