JavaScript里的filter()是数组原型上的一个高阶函数，用于根据条件筛选元素并生成一个新数组。它不会修改原数组，而是返回满足条件的元素组成的新数组。理解它的运行机制以及容易踩坑的地方，对日常开发非常重要。
filter()方法的基本用法
filter()接受一个回调函数，该回调对每一个元素执行，当返回值为true时，当前元素会被保留到结果数组中。下面是一个简单示例：
// 筛选出数组中大于10的数字
const nums = [5, 12, 8, 20, 3];
const result = nums.filter(function(item) {
return item > 10;
});
console.log(result); // [12, 20]
常见陷阱
陷阱一：回调函数忘记写return
如果使用了大括号却没有返回任何值，回调函数默认返回undefined，会被当作false处理，最终得到空数组。
const arr = [1, 2, 3];
// 错误写法：没有return，结果为[]
const wrong = arr.filter(function(x) {
x > 1;
});
console.log(wrong);
// 正确写法
const right = arr.filter(function(x) {
return x > 1;
});
console.log(right); // [2, 3]
陷阱二：在回调中修改原数组
虽然filter()本身不改原数组，但如果在回调里直接操作原数组，可能造成难以预料的行为，尤其在稀疏数组上。
const list = [1, 2, 3];
const filtered = list.filter(function(x, index) {
list.push(index); // 不推荐：修改原数组
return x > 1;
});
console.log(filtered);
陷阱三：稀疏数组的坑
filter()会跳过空位，不会为它们调用回调，这可能导致对数组长度或索引的误解。
const sparse = [1, , 3]; // 中间是空位
const out = sparse.filter(function(x) {
return x !== undefined;
});
console.log(out); // [1, 3]，空位被直接忽略
正确使用建议
- 始终在回调中明确返回布尔值，箭头函数可省略大括号以隐式返回。
- 保持回调纯净，不要修改原数组或外部变量。
- 处理对象数组时，注意使用严格相等或特定字段判断。
// 使用箭头函数隐式返回，筛选出状态为active的用户
const users = [
{ name: 'Tom', active: true },
{ name: 'Lucy', active: false }
];
const activeUsers = users.filter(u => u.active === true);
console.log(activeUsers);
小结
filter()方法用起来简单，但忽略返回值和副作用就会引发问题。遵循纯函数风格、明确返回条件，就能稳定高效地完成数组筛选任务。
JavaScriptfilter方法数组处理修改时间：2026-07-29 08:06:17