当前位置：首页 > JavaScript

js筛选功能实现

2026-04-04 06:30:09JavaScript

JavaScript 筛选功能实现

基本数组筛选

使用 Array.prototype.filter() 方法对数组进行筛选：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

对象数组筛选

对包含对象的数组进行筛选：

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];

const adults = users.filter(user => user.age >= 25);
console.log(adults); // 输出: [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]

多条件筛选

结合多个条件进行复杂筛选：

js筛选功能实现

const products = [
  { name: 'Laptop', price: 1000, inStock: true },
  { name: 'Phone', price: 500, inStock: false },
  { name: 'Tablet', price: 300, inStock: true }
];

const affordableInStock = products.filter(product => 
  product.price < 800 && product.inStock
);
console.log(affordableInStock); // 输出: [{name: 'Tablet', price: 300, inStock: true}]

动态筛选

根据用户输入动态筛选数据：

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

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

正则表达式筛选

使用正则表达式进行更灵活的匹配：

js筛选功能实现

const words = ['hello', 'world', 'javascript', 'filter'];
const pattern = /^[a-j]/i;

const matchedWords = words.filter(word => pattern.test(word));
console.log(matchedWords); // 输出: ['hello', 'javascript', 'filter']

性能优化

对于大型数据集，考虑使用更高效的筛选方法：

// 使用for循环替代filter()以获得更好性能
function fastFilter(array, condition) {
  const result = [];
  for (let i = 0; i < array.length; i++) {
    if (condition(array[i], i, array)) {
      result.push(array[i]);
    }
  }
  return result;
}

链式筛选

可以链式调用多个筛选方法：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers
  .filter(n => n > 3)
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

console.log(result); // 输出: [8, 12, 16, 20]