当前位置：首页 > JavaScript

js实现筛选数据功能

2026-01-31 04:44:36JavaScript

实现基础筛选功能

通过数组的 filter 方法可以快速实现数据筛选：

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

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

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

多条件筛选实现

使用逻辑运算符组合多个筛选条件：

js实现筛选数据功能

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

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

动态搜索筛选

结合输入框实现实时搜索功能：

const searchInput = document.getElementById('search');
const dataDisplay = document.getElementById('results');

searchInput.addEventListener('input', (e) => {
  const searchTerm = e.target.value.toLowerCase();
  const filtered = data.filter(item => 
    item.name.toLowerCase().includes(searchTerm)
  );
  renderResults(filtered);
});

function renderResults(items) {
  dataDisplay.innerHTML = items.map(item => 
    `<div>${item.name}</div>`
  ).join('');
}

复杂条件筛选

处理更复杂的筛选逻辑时可考虑使用高阶函数：

js实现筛选数据功能

function createFilterPredicate(filters) {
  return item => {
    for (const [key, condition] of Object.entries(filters)) {
      if (typeof condition === 'function' && !condition(item[key])) {
        return false;
      }
      if (typeof condition !== 'function' && item[key] !== condition) {
        return false;
      }
    }
    return true;
  };
}

const complexFilter = createFilterPredicate({
  category: val => ['fruit', 'vegetable'].includes(val),
  id: id => id > 0
});
const filteredData = data.filter(complexFilter);

性能优化方案

对于大数据集考虑使用以下优化手段：

// 使用Web Worker处理大数据
const worker = new Worker('filter-worker.js');
worker.postMessage({ data, filters });
worker.onmessage = e => updateUI(e.data);

// 使用防抖减少频繁过滤
function debounceFilter() {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      const filtered = heavyFilterOperation();
      updateResults(filtered);
    }, 300);
  };
}

筛选与排序结合

筛选后常需要配合排序功能：

function filterAndSort(data, filters, sortKey, direction = 'asc') {
  const filtered = data.filter(createFilterPredicate(filters));
  return filtered.sort((a, b) => {
    if (direction === 'asc') return a[sortKey] > b[sortKey] ? 1 : -1;
    return a[sortKey] < b[sortKey] ? 1 : -1;
  });
}