JS filter()方法详解|极客笔记

JS filter()方法详解

在 JavaScript 中，filter() 是一个数组方法，用于从数组中过滤出符合条件的元素，并返回一个新的数组。本文将详细介绍 filter() 的使用方法和示例代码。

语法

filter() 方法的语法如下：

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

arr：调用 filter() 方法的数组。
callback：用来测试数组中的每个元素的函数。它可以接收三个参数：
- element：当前正在处理的元素。
- index（可选）：当前处理元素在数组中的索引。
- array（可选）：调用 filter() 方法的数组。
thisArg（可选）：执行 callback 函数时使用的 this 值。

返回值

filter() 方法会遍历数组中的每个元素，并执行 callback 函数。如果 callback 函数的返回值为 true，则将该元素添加到一个新的数组中。最终，filter() 方法会返回包含过滤后的元素的新数组。

示例代码

下面通过一些示例代码来演示 filter() 方法的使用。

过滤出偶数

const numbers = [1, 2, 3, 4, 5, 6];

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

console.log(evenNumbers); // Output: [2, 4, 6]

在上面的示例中，我们定义了一个包含数字的数组 numbers。通过调用 filter() 方法，我们使用匿名函数来判断数组中的每个元素是否为偶数。如果是偶数，则返回 true，该元素将被添加到新的数组 evenNumbers 中。最后，我们打印出 evenNumbers 数组。

过滤出长度大于等于5的字符串

const words = ['apple', 'banana', 'cherry', 'dragon fruit', 'elderberry'];

const longWords = words.filter(function(element) {
  return element.length >= 5;
});

console.log(longWords); // Output: ['banana', 'cherry', 'dragon fruit', 'elderberry']

上面的代码中，我们有一个包含单词的数组 words。通过调用 filter() 方法，我们使用匿名函数来判断数组中的每个元素是否长度大于等于5。如果长度满足条件，则返回 true，该元素将被添加到新的数组 longWords 中。最后，我们打印出 longWords 数组。

使用箭头函数进行过滤

const numbers = [1, 2, 3, 4, 5, 6];

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

console.log(evenNumbers); // Output: [2, 4, 6]

与上面的示例类似，这次我们使用了箭头函数来定义 filter() 方法的回调函数。箭头函数是 ES6 引入的一种简写形式，它在这个示例中提供了更简洁的语法。运行结果与之前的示例相同。

注意事项

在使用 filter() 方法时，需要注意以下几点：

filter() 方法不会改变原始数组，而是返回一个新的数组。
如果没有元素通过测试，filter() 方法将返回一个空数组。
callback 函数在处理数组元素时，会按照从左到右的顺序调用每个元素，跳过已删除或从未被赋值的数组元素。
如果只传入 callback 参数，filter() 方法将在全局对象（即 window）上下文中调用该函数。如果传入了 thisArg 参数，则可以在 callback 函数中使用它作为 this 值。