当前位置：首页 > JavaScript

js筛选功能的实现

2026-03-01 07:22:07JavaScript

实现 JavaScript 筛选功能的方法

方法一：使用数组的 filter() 方法
通过 filter() 方法可以创建一个新数组，包含通过测试函数的所有元素。

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

方法二：基于输入框动态筛选
结合输入框事件监听，实现动态筛选功能。

const input = document.querySelector('input');
const items = ['apple', 'banana', 'orange'];

input.addEventListener('input', (e) => {
  const filtered = items.filter(item => 
    item.toLowerCase().includes(e.target.value.toLowerCase())
  );
  console.log(filtered);
});

方法三：多条件筛选
通过组合多个条件实现复杂筛选逻辑。

const products = [
  { name: 'Laptop', price: 1000, category: 'electronics' },
  { name: 'Shirt', price: 20, category: 'clothing' }
];

const filtered = products.filter(product => 
  product.price < 50 && product.category === 'clothing'
);
console.log(filtered); // 输出 { name: 'Shirt', ... }

方法四：使用正则表达式筛选
通过正则表达式匹配更灵活的文本模式。

const words = ['hello', 'world', 'javascript'];
const regex = /^j/;
const filtered = words.filter(word => regex.test(word));
console.log(filtered); // 输出 ['javascript']

方法五：结合 DOM 操作实现界面筛选
动态更新 DOM 元素以显示筛选结果。

const listItems = document.querySelectorAll('li');
const searchInput = document.querySelector('input');

searchInput.addEventListener('input', (e) => {
  const searchTerm = e.target.value.toLowerCase();
  listItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(searchTerm) ? 'block' : 'none';
  });
});