当前位置：首页 > JavaScript

js实现筛选数据功能

2026-04-04 20:41:11JavaScript

筛选数据的基本方法

在JavaScript中，筛选数据通常使用数组的filter方法。该方法会创建一个新数组，包含通过回调函数测试的所有元素。

const data = [1, 2, 3, 4, 5];
const filteredData = data.filter(item => item > 3);
console.log(filteredData); // 输出: [4, 5]

多条件筛选

可以通过在回调函数中添加多个条件来实现复杂筛选。

const users = [
  { name: 'Alice', age: 25, active: true },
  { name: 'Bob', age: 30, active: false },
  { name: 'Charlie', age: 35, active: true }
];

const filteredUsers = users.filter(user => user.age > 28 && user.active);
console.log(filteredUsers); // 输出: [{ name: 'Charlie', age: 35, active: true }]

动态筛选条件

当筛选条件需要动态变化时，可以将条件封装为函数。

function createFilter(minAge, isActive) {
  return user => user.age >= minAge && user.active === isActive;
}

const filterAdults = createFilter(18, true);
const result = users.filter(filterAdults);

搜索功能实现

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

const searchInput = document.getElementById('search');
const data = ['apple', 'banana', 'cherry'];

searchInput.addEventListener('input', (e) => {
  const searchTerm = e.target.value.toLowerCase();
  const results = data.filter(item => 
    item.toLowerCase().includes(searchTerm)
  );
  console.log(results);
});

性能优化

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

使用Web Worker进行后台筛选
实现防抖(Debounce)减少频繁操作
对数据进行分页处理

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const optimizedSearch = debounce(searchHandler, 300);

复杂对象筛选

处理嵌套对象时，可以使用递归或辅助函数。

js实现筛选数据功能

const complexData = [
  { id: 1, details: { tags: ['js', 'web'] } },
  { id: 2, details: { tags: ['python', 'data'] } }
];

const hasTag = (data, tag) => 
  data.some(item => item.details.tags.includes(tag));

const jsItems = complexData.filter(item => 
  item.details.tags.includes('js')
);