JavaScript数组filter方法用于筛选符合条件的元素并返回新数组，不修改原数组。它接收一个回调函数作为参数，对每个元素执行测试，当回调返回true时，该元素被加入新数组。常用于过滤偶数、筛选及格学生、搜索关键词和清理无效数据等场景。例如：[1, 2, 3, 4].filter(num => num % 2 === 0) 返回 [2, 4]；对象数组中可按属性过滤，如成绩及格者 students.filter(s => s.score >= 60)；字符串搜索可用 includes 方法结合使用；清理空值可通过 Boolean(item) 过滤假值。filter还可与map、sort等方法链式调用，提升数据处理效率。核心是理解其基于条件判断返回新数组的机制，并注意回调函数中正确返回布尔值。
JavaScript中的数组filter方法是一个非常实用的工具，用于从原数组中筛选出符合条件的元素并生成一个新数组。它不会修改原始数组，而是返回一个包含满足条件元素的新数组。这个方法在处理数据过滤、搜索、条件判断等场景中非常常见。
filter方法的基本语法与工作原理
filter() 方法接收一个回调函数作为参数，该函数会对数组中的每个元素进行测试。只有当回调函数返回 true 时，当前元素才会被加入到新的数组中。
基本语法如下：
array.filter(callback(element, index, array), thisArg)其中：
立即学习“Java免费学习笔记（深入）”；
- callback：用来测试每个元素的函数
- element：当前正在处理的元素
- index（可选）：当前元素的索引
- array（可选）：调用 filter 的原数组
- thisArg（可选）：执行 callback 时使用的 this 值
通常情况下，我们只使用第一个参数 element 就能满足大多数需求。
常见使用场景与实际案例
下面通过几个典型例子来展示 filter 方法的实际应用。
1. 过滤数字数组中的偶数
假设有一个数字数组，我们只想保留其中的偶数：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8]
2. 筛选出成绩及格的学生
处理对象数组时，可以根据某个属性进行过滤：
const students = [{ name: 'Alice', score: 85 },
{ name: 'Bob', score: 45 },
{ name: 'Charlie', score: 70 }
];
const passed = students.filter(student => student.score >= 60);
console.log(passed);
// [{ name: 'Alice', score: 85 }, { name: 'Charlie', score: 70 }]
3. 搜索包含特定关键词的字符串
在实现搜索功能时，filter 非常有用：
const products = ['Apple', 'Banana', 'Cherry', 'Date'];const search = 'an';
const result = products.filter(item => item.toLowerCase().includes(search.toLowerCase()));
console.log(result); // ['Banana']
4. 排除空值或无效数据
有时需要清理数据，去除 null、undefined 或空字符串：
const data = ['apple', '', 'banana', null, 'cherry', undefined];const cleaned = data.filter(item => Boolean(item));
console.log(cleaned); // ['apple', 'banana', 'cherry']
结合其他数组方法提升效率
filter 经常与其他数组方法如 map、sort、find 等配合使用，以完成更复杂的数据处理任务。
例如：先筛选出及格的学生，再提取他们的名字：
const names = students.filter(s => s.score >= 60)
.map(s => s.name);
console.log(names); // ['Alice', 'Charlie']
这种链式调用让代码更简洁、更具可读性。
基本上就这些。filter 方法简单但强大，掌握它能让你在处理数组时更加得心应手。关键是理解它的返回机制——只保留“true”对应的元素，其余自动排除。实际开发中多结合业务逻辑灵活运用即可。不复杂但容易忽略细节，比如不要忘记 return 条件判断。
