JavaScript 数组遍历怎么通过 filter 筛选出符合条件的目标数据-js教程-PHP中文网

filter用于筛选并返回满足条件的新数组，不修改原数组；回调函数返回true保留元素，false过滤掉；需执行副作用时应改用foreach或for...of。

javascript 数组遍历怎么通过 filter 筛选出符合条件的目标数据

filter 不是用来“遍历”的，而是用来“筛选”的——它会遍历数组，但目的不是执行副作用（比如打印、修改），而是**返回一个新数组，包含所有满足条件的元素**。

filter 的基本用法

语法很简单：arr.filter(callback)，其中 callback 是一个函数，对每个元素调用一次，返回 true 表示保留该元素，false 表示过滤掉。

原数组不会被修改
返回的是一个全新数组（可能为空）
如果不需要新数组，只是想检查或处理，别用 filter —— 改用 some、every 或 forEach

常见筛选场景示例

假设有一个用户数组：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

const users = [
  { id: 1, name: '张三', age: 25, active: true },
  { id: 2, name: '李四', age: 30, active: false },
  { id: 3, name: '王五', age: 28, active: true }
];

筛选活跃用户：users.filter(u => u.active)
筛选年龄大于 26 的人：users.filter(u => u.age > 26)
筛选名字含“三”的用户：users.filter(u => u.name.includes('三'))

注意回调函数的参数

filter 的回调函数默认接收三个参数：item（当前元素）、index（索引）、array（原数组）。大多数时候只用第一个：

只关心值：arr.filter(x => x > 10)
需要索引时：arr.filter((x, i) => i % 2 === 0)（取偶数位元素）
需对比原数组时（较少见）：arr.filter((x, i, a) => x !== a[i+1])

和 for / forEach 的关键区别

别这样写：

arr.filter(item => {
  console.log(item); // ❌ filter 不是为打印设计的
  doSomething(item); // ❌ 副作用逻辑放这里容易误导
  return true;
});

应该这样分清职责：

筛选数据 → 用 filter
遍历并执行操作 → 用 forEach 或 for...of
既要筛选又要处理 → 先 filter 得到目标数组，再 forEach 处理

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南