JavaScript 中 filter 方法怎么按条件遍历筛选数组元素-js教程-PHP中文网

filter方法遍历数组并返回满足条件的新数组，不改变原数组；函数参数为当前元素、索引和原数组，返回真值则保留该元素。

javascript 中 filter 方法怎么按条件遍历筛选数组元素

filter 方法会遍历数组每一项，对每个元素执行你提供的函数，只保留返回值为 true 的元素，最终返回一个新数组，原数组不变。

核心用法：传入一个判断函数

这个函数接收三个参数：当前元素（必填）、索引、原数组。通常只用第一个参数即可：

函数返回 true → 该元素被保留在新数组中
函数返回 false、undefined、null、0、"" 等假值 → 被过滤掉

常见筛选场景示例

筛选数字数组中的偶数：

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0); // [2, 4, 6]

筛选对象数组中满足条件的对象：

JavaStoryDevelop

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

下载

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 }
];
const adults = users.filter(u => u.age >= 18); // Alice 和 Charlie

筛选包含关键词的字符串：

const words = ['apple', 'banana', 'cherry', 'date'];
const hasA = words.filter(w => w.includes('a')); // ['apple', 'banana', 'date']

注意点：不修改原数组，且返回新数组

filter 不会改变原始数组，也不会跳过空位（比如稀疏数组中的 empty slot）；它会按索引顺序逐个检查，包括 undefined 或 null 元素（只要它们占位）：

如果原数组是 [1, , 3]（索引1为空），filter 仍会调用两次函数（索引0和索引2），跳过索引1
如果某项是 undefined，但位置存在，函数仍会收到它并参与判断

可以结合其他方法链式使用

filter 常和 map、sort 等配合，比如先筛选再提取字段：

const namesOfAdults = users
  .filter(u => u.age >= 18)
  .map(u => u.name); // ['Alice', 'Charlie']

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