数组filter的实用过滤模式

JavaScript的filter()方法是数组操作中最实用且强大的工具之一，它允许我们基于特定条件筛选数组元素。本文将介绍几种实用的过滤模式，帮助您更高效地处理数组数据。

基本用法回顾

filter()方法创建一个新数组，包含通过所提供函数实现的测试的所有元素：

javascript 复制代码

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// 结果: [2, 4]

实用过滤模式

1. 去除假值

快速去除数组中的所有假值（false, 0, "", null, undefined, NaN）：

javascript 复制代码

const mixedValues = [0, 1, false, 2, '', 3];
const truthyValues = mixedValues.filter(Boolean);
// 结果: [1, 2, 3]

2. 对象数组过滤

根据对象属性进行筛选：

javascript 复制代码

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true }
];

const activeUsers = users.filter(user => user.active);
// 结果: [{ id: 1, name: 'Alice', active: true }, { id: 3, name: 'Charlie', active: true }]

3. 多条件过滤

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

javascript 复制代码

const products = [
  { name: 'Laptop', price: 999, inStock: true },
  { name: 'Phone', price: 699, inStock: false },
  { name: 'Tablet', price: 499, inStock: true }
];

const affordableInStock = products.filter(product => 
  product.price < 1000 && product.inStock
);
// 结果: [{ name: 'Laptop', price: 999, inStock: true }, { name: 'Tablet', price: 499, inStock: true }]

4. 动态过滤函数

创建可重用的过滤函数：

javascript 复制代码

function createPriceFilter(maxPrice) {
  return product => product.price <= maxPrice;
}

const filterUnder500 = createPriceFilter(500);
const cheapProducts = products.filter(filterUnder500);
// 结果: [{ name: 'Tablet', price: 499, inStock: true }]

5. 数组去重

结合indexOf或findIndex实现数组去重：

javascript 复制代码

const duplicates = [1, 2, 2, 3, 4, 4, 5];
const unique = duplicates.filter((item, index) => duplicates.indexOf(item) === index);
// 结果: [1, 2, 3, 4, 5]

6. 搜索过滤

实现简单的搜索功能：

javascript 复制代码

const books = [
  { title: 'JavaScript Guide', author: 'John Doe' },
  { title: 'React Basics', author: 'Jane Smith' },
  { title: 'Advanced JavaScript', author: 'John Doe' }
];

function searchBooks(query) {
  return books.filter(book => 
    book.title.toLowerCase().includes(query.toLowerCase()) || 
    book.author.toLowerCase().includes(query.toLowerCase())
  );
}

const results = searchBooks('javascript');
// 结果: [{ title: 'JavaScript Guide', author: 'John Doe' }, { title: 'Advanced JavaScript', author: 'John Doe' }]

性能考虑

虽然filter()非常方便，但在处理大型数组时需要注意：

对于非常大的数组，考虑使用for循环可能更高效
链式调用多个数组方法（如map、filter、reduce）会创建中间数组，可能影响性能

总结

filter()方法提供了简洁而强大的数组过滤能力。通过掌握这些实用模式，您可以更高效地处理各种数据筛选场景。记住，filter()总是返回一个新数组，不会修改原数组，这符合函数式编程的不变性原则。

在实际开发中，结合其他数组方法如map和reduce，可以构建出更复杂的数据处理管道，满足各种业务需求。