JS Filter: JavaScript 数组方法 fliter()|极客笔记

JS Filter: JavaScript 数组方法 fliter()

在 JavaScript 中，filter() 是数组方法之一，它可用于筛选出符合给定条件的元素，并返回一个新的数组。filter() 方法与 map() 方法类似，但 filter() 方法只返回符合条件的元素，而不是对原数组的每个元素应用某个函数操作后的结果。

本文将详细介绍 filter() 方法的语法、用法和示例代码，帮助读者更好地理解和运用该方法。

一、语法

filter() 方法的语法如下：

array.filter(callback(element[, index[, array]])[, thisArg])

其中：

array：必选项，要调用 filter() 方法的数组。
callback：必选项，循环遍历数组中的每个元素，并根据条件判断是否包含在返回数组中的回调函数。
element：每次迭代时数组中当前处理的元素。
index：可选项，当前处理的元素在数组中的索引。
array：可选项，调用 filter() 方法的数组。
thisArg：可选项，执行 callback 时使用的 this 值。

callback 函数可以有三个参数：element、index 和 array。其中，element 参数表示当前遍历到的元素，index 参数表示当前元素在数组中的索引，array 参数表示原数组。

回调函数 callback 必须返回一个布尔值。如果返回 true，当前元素将包含在返回的新数组中。如果返回 false，当前元素将被过滤掉，不包含在新数组中。

二、用法示例

为了更好地理解 filter() 方法的使用场景，下面将介绍几个常见的示例。

1. 筛选数组中的偶数

假设我们有一个数组，需要筛选出其中的偶数，并返回一个新的数组。可以使用 filter() 方法和取余运算符 % 来实现：

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

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

console.log(evenNumbers);

输出：

[2, 4, 6, 8]

在上述代码中，首先定义了一个包含一组整数的数组 array，然后使用 filter() 方法来筛选出其中的偶数。回调函数 num => num % 2 === 0 用于判断每个元素是否为偶数，如果是，则返回 true，否则返回 false。最终将筛选出的偶数保存在 evenNumbers 数组中，并输出。

2. 筛选包含指定字符的字符串

有时候我们需要从一个字符串数组中筛选出包含特定字符的字符串，可以使用 filter() 方法和 includes() 方法来实现：

const array = ['apple', 'banana', 'orange', 'grape'];

const filteredArray = array.filter(str => str.includes('a'));

console.log(filteredArray);

输出：

['apple', 'banana', 'grape']

上述代码中，我们定义了一个包含一组水果名称的字符串数组 array，然后使用 filter() 方法筛选出包含字母 a 的字符串。回调函数 str => str.includes('a') 用于判断每个元素是否包含字母 a，如果是，则返回 true，否则返回 false。最终将筛选出的符合条件的字符串保存在 filteredArray 数组中，并输出。

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

如果有一个对象数组，并且需要筛选出满足特定条件的对象，也可以使用 filter() 方法。假设我们有一个保存学生信息的对象数组，需要筛选出分数大于等于 80 分的学生：

const students = [
  { name: 'Alice', score: 90 },
  { name: 'Bob', score: 75 },
  { name: 'Charlie', score: 85 },
  { name: 'David', score: 95 },
];

const passedStudents = students.filter(student => student.score >= 80);

console.log(passedStudents);

输出：

[
  { name: 'Alice', score: 90 },
  { name: 'Charlie', score: 85 },
  { name: 'David', score: 95 }
]

在上述代码中，我们定义了一个包含学生信息的对象数组 students，然后使用 filter() 方法筛选出分数大于等于 80 分的学生。回调函数 student => student.score >= 80 用于判断每个学生对象是否满足分数大于等于 80 分的条件，如果是，则返回 true，否则返回 false。最终将筛选出的满足条件的学生保存在 passedStudents 数组中，并输出。