JavaScript 中的 .filter 方法|极客笔记

JavaScript 中的 .filter 方法

在 JavaScript 中，.filter 方法是用来过滤数组中的元素，返回满足指定条件的元素组成的新数组。这个方法可以接受一个函数作为参数，该函数会对数组中的每一个元素进行处理，返回 true 则该元素被保留，返回 false 则该元素被过滤掉。

语法

.filter() 方法的语法如下：

const newArray = arr.filter(callback(element[, index[, array]])[, thisArg]);

callback：表示对数组中的每个元素执行的回调函数，该函数接受以下三个参数
- element：当前处理的元素
- index (可选)：当前处理元素的索引
- array (可选)：原数组本身
thisArg (可选)：执行 callback 时使用的 this 值

示例

让我们通过一个示例来说明 .filter() 方法的用法。假设我们有一个数组 numbers 包含一些数字，我们想过滤出所有偶数。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4, 6, 8, 10]

在这个示例中，我们创建了一个新数组 evenNumbers，其中仅包含原数组 numbers 中的偶数。我们传入一个回调函数，对每个元素进行取余操作判断是否为偶数，返回 true 表示保留，最后输出。

使用箭头函数

除了传统的匿名函数外，我们还可以使用箭头函数来简化代码。上面的示例可以重写为：

const evenNumbers = numbers.filter(num => num % 2 === 0);

不改变原数组

需要注意的是，.filter() 方法并不会改变原数组，它会返回一个新的过滤后的数组。

console.log(numbers); // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

过滤对象数组

除了可以过滤基本类型的数组外，.filter() 方法同样适用于对象数组。假设我们有一个包含学生信息的数组：

const students = [
  { name: 'Alice', score: 80 },
  { name: 'Bob', score: 55 },
  { name: 'Charlie', score: 95 }
];

const topStudents = students.filter(student => student.score >= 90);

console.log(topStudents);
// 输出 [{ name: 'Charlie', score: 95 }]

在这个示例中，我们筛选出了分数大于等于 90 的学生，返回一个新数组 topStudents。

链式调用

.filter() 方法可以和其他数组方法链式调用，以实现更复杂的操作。例如，我们想筛选出学生姓名以 ‘A’ 开头且分数大于 60 的学生：

const filteredStudents = students
  .filter(student => student.name.startsWith('A'))
  .filter(student => student.score > 60);

console.log(filteredStudents);
// 输出 [{ name: 'Alice', score: 80 }]