filter方法创建新数组筛选符合条件元素，不改变原数组；支持单参数基础用法、对象属性筛选、三参数灵活控制，并注意跳过空槽、返回空数组等细节。
filter 方法能帮你从数组里挑出符合条件的元素，生成一个全新数组，原数组完全不受影响。
基本用法：只传一个回调函数
最常用的方式是给 filter 传一个箭头函数或普通函数，它会自动遍历每个元素，并根据函数返回值决定是否保留：
- 返回 true 或其他真值（如非零数字、非空字符串、对象等），该元素进新数组
- 返回 false、0、""、null、undefined、NaN，该元素被跳过
例如筛选偶数：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
const evens = numbers.filter(n => n % 2 === 0); // [2, 4, 6]
处理对象数组：按属性条件筛选
当数组元素是对象时，回调函数中直接访问属性即可。比如找出及格的学生：
const students = [{ name: '小明', score: 58 },
{ name: '小红', score: 72 },
{ name: '小刚', score: 45 }
];
const passed = students.filter(s => s.score >= 60); // [{ name: '小红', score: 72 }]
- 注意别写成
s.score直接当布尔值用——如果 score 是 0，会被误判为“不满足”而过滤掉 - 推荐显式比较：
s.score > 0、s.name !== ''，避免隐式转换陷阱
利用全部三个参数：更灵活的控制
回调函数其实可接收三个参数：当前元素、当前索引、原数组。多数情况只需第一个，但某些场景很有用：
- 按位置筛选：比如只取前 3 个元素
arr.filter((_, i) => i - 依赖数组整体状态：比如排除重复项（配合 indexOf）
arr.filter((item, i) => arr.indexOf(item) === i) - 需要在回调里读取数组长度或其它字段时，第三个参数
array就能直接用
注意事项：容易踩的坑
filter 看似简单，但几个细节常被忽略：
-
不会遍历空槽：稀疏数组中未赋值的位置（如
[1,,3]的索引 1）直接跳过，不调用回调 - 不修改原数组：哪怕回调里改了原数组某个元素，filter 返回的仍是基于调用瞬间快照的新数组
-
返回空数组而非 undefined：没匹配到任何元素时，结果是
[]，可安全链式调用 map 或 reduce - thisArg 很少用：除非回调是对象方法且需绑定 this，否则通常省略
