Array.prototype.filter() 是 JavaScript 数组的一个高阶函数，用于筛选数组中满足条件的元素，返回一个新数组。

1. 基本语法

const newArray = array.filter(callback(element, index, array), thisArg)

返回值：包含所有通过测试的元素的新数组

2. 核心特性

(1) 不改变原数组

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(n => n % 2 === 0);

console.log(numbers);      // [1, 2, 3, 4, 5]（原数组不变）
console.log(evenNumbers);  // [2, 4]（新数组）

(2) 回调函数返回布尔值

// 返回 true：保留该元素
// 返回 false：过滤掉该元素
const result = [1, 2, 3].filter(n => n > 1); // [2, 3]

(3) 自动跳过空位

const sparseArray = [1, , 3]; // 有空位
const result = sparseArray.filter(n => true);
console.log(result); // [1, 3]（空位被跳过）

3. 简单示例

基础用法

const numbers = [1, 2, 3, 4, 5, 6];

// 筛选偶数
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6]

// 筛选大于3的数
const largeNumbers = numbers.filter(num => num > 3);
console.log(largeNumbers); // [4, 5, 6]

字符串数组过滤

const fruits = ['apple', 'banana', 'grape', 'orange'];

// 筛选包含字母 'a' 的水果
const aFruits = fruits.filter(fruit => fruit.includes('a'));
console.log(aFruits); // ['apple', 'banana', 'grape', 'orange']

// 筛选长度大于5的水果
const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits); // ['banana', 'orange']

4. 实用场景示例

(1) 对象数组过滤

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

// 筛选活跃用户
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); 
// [{ name: 'Alice', age: 25, active: true }, { name: 'Carol', age: 28, active: true }]

// 筛选年龄大于27的用户
const olderUsers = users.filter(user => user.age > 27);
console.log(olderUsers);
// [{ name: 'Bob', age: 30, active: false }, { name: 'Carol', age: 28, active: true }]

(2) 删除特定值

// 删除所有假值（false, 0, "", null, undefined, NaN）
const mixedArray = [0, 1, false, 2, '', 3, null, undefined, NaN];
const truthyValues = mixedArray.filter(Boolean);
console.log(truthyValues); // [1, 2, 3]

// 删除空字符串和 null
const cleanArray = ['hello', '', 'world', null, 'js'].filter(item => item);
console.log(cleanArray); // ['hello', 'world', 'js']

(3) 搜索过滤

const products = [
  { name: 'iPhone', category: 'electronics', price: 999 },
  { name: 'MacBook', category: 'electronics', price: 1999 },
  { name: 'Novel', category: 'books', price: 20 }
];

// 根据搜索条件过滤
const searchTerm = 'phone';
const searchResults = products.filter(product =>
  product.name.toLowerCase().includes(searchTerm.toLowerCase())
);
console.log(searchResults); // [{ name: 'iPhone', ... }]

// 多条件过滤
const expensiveElectronics = products.filter(product =>
  product.category === 'electronics' && product.price > 1000
);
console.log(expensiveElectronics); // [{ name: 'MacBook', ... }]

5. Vue 中的使用示例

<template>
  <div>
    <input v-model="searchText" placeholder="搜索用户">
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      users: [
        { id: 1, name: 'Alice', email: 'alice@example.com' },
        { id: 2, name: 'Bob', email: 'bob@test.com' },
        { id: 3, name: 'Carol', email: 'carol@example.com' }
      ]
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user =>
        user.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
        user.email.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  }
};
</script>

6. 注意事项

(1) 性能考虑

// ❌ 避免在循环中嵌套 filter
const bigArray = [/* 大量数据 */];
const result = bigArray.filter(item => {
  // 复杂的计算...
});

// ✅ 考虑先用 map 预处理
const preprocessed = bigArray.map(item => transform(item));
const result = preprocessed.filter(item => condition(item));

(2) 稀疏数组处理

const sparse = [1, , 3, , 5];
const result = sparse.filter(x => true);
console.log(result); // [1, 3, 5]（空位被移除）

(3) 与 find() 的区别

const numbers = [1, 2, 3, 4];

// filter：返回所有匹配元素
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// find：返回第一个匹配元素
const firstEven = numbers.find(n => n % 2 === 0); // 2

7. 浏览器兼容性

• 支持所有现代浏览器（IE9+）
• Polyfill：如需支持旧浏览器，可引入 core-js

总结

• 用途：从数组中筛选满足条件的元素
• 返回值：新数组（原数组不变）
• 核心：回调函数返回 true-留下元素，false-删除该元素 ★★★
• Vue 应用：常用于计算属性实现动态过滤
• 优势：函数式编程，代码简洁易读

.filter() 是处理数组筛选需求的首选方法，比传统 for 循环更简洁安全！

记忆口诀

true 留，false 走
条件成立就保留，不成立就踢掉

这个简单的规则是 .filter()方法的核心机制，掌握了它就掌握了数组过滤的精髓！