序言

今天这篇文章中，我们将一起来学习一下数组原型上的filter方法。数组作为我们日常编程的常客，和他照面的机会真的是太多太多了，所以我们不得不多了解几个他身上能用的方法，写这篇文章的初衷就是为了巩固这个知识点，并且和各位伙伴们分享一起学习，那么话不多说，开始我们今天的干货！

Try a try(尝试一下)

首先在了解这个方法的什么语法、作用等等之前，我更喜欢先自己看一遍示例自己来尝试理解一下这个方法的作用，然后再去看文档中对其的介绍。

js 复制代码

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

所以我们一起来看，在上面这段代码里面我们定义了一个字符串数组，并且里面有5个元素，而且我们知道字符串是有length属性的，如果我们需要去除字符串数组中字符串长度小于等于6的元素，我们就可以调用filter方法。第一眼看去这个filter接收一个回调函数，并且是会返回值的，接着我们用一个新变量来接收返回值并打印，wo~成功的实现了需求：剔除数组中字符串长度小于等于6的字符串。

那么我们有了自己对其的理解后，可能也会有疑惑，我们知道这个方法会有一个返回值，然后我们用一个变量来接受返回值，但是这个返回值是否会改变原数组，并且想了解一下在哪些情况下我们可以选择调用这个方法来提高效率呢？

基本语法

那么接下来我们就先来了解一下filter()方法的基本语法吧：

js 复制代码

filter(callbackFN(element, index, array)), thisArg);

我们看到callback是一个用于测试数组的每个元素的函数，它接受三个参数：
- element：当前正在处理的数组元素。
- index（可选）：当前正在处理的元素在数组中的索引。
- array（可选）：调用filter的数组本身。
thisArg（可选）：执行callback函数时使用的this值。

示例

让我们通过一个简单的例子来说明filter()的使用：

js 复制代码

// 假设我们有一个数字数组，我们想筛选出所有的偶数
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const evenNumbers = numbers.filter(number => number % 2 === 0);

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

在这个例子中，我们对numbers数组调用filter()方法，并通过提供的回调函数测试每个元素对2取余是否为0，最后保留满足条件的元素，并返回一个新数组对象，从结果看出我们最终实现了要求。

这个方法有什么好处呢？我们来想下如果没有filter()这个方法我们要实现上述要求会如何写代码？首先需要有一个函数用来处理数组，然后调用这个函数对数组中的每个元素进行遍历检查，最后将筛选出的元素形成一个新数组覆盖之前的数组，而官方为我们提供的filter方法就省去了我们遍历元素、覆盖数组的过程，我们只需要提供函数和数组就行了，嗯~ o(￣▽￣)o还不错！过程很简单，不过能省则省，减去这些简单工作的时间，多出一些摸鱼的时间何尝不是一件美事呀！

使用场景

那么我们已经知道了filter()方法的语法和使用了，接下来让我们一起来看看在哪些场景中我们经常会邀请到这位嘉宾来为我们驻场呢？

1. 筛选数组元素

首先，filter()最常见的用途之一就是根据特定条件筛选数组元素。

js 复制代码

const words = ['apple', 'banana', 'cherry', 'date'];
const filteredWords = words.filter(word => word.length > 5);

console.log(filteredWords); // 输出 ['banana', 'cherry']

2. 删除数组中的空值

其次，如果我们想要剔除数组中一些无效值时，我们也可以使用filter()方法，比如有了它我们就可以轻松删除数组中的空值或Falsy值。

js 复制代码

const values = [0, 1, '', null, 'hello', undefined, 42];
const nonEmptyValues = values.filter(Boolean);

console.log(nonEmptyValues); // 输出 [1, 'hello', 42]

3. 使用`thisArg`参数

我们前面一直没用到的一个参数，这里作为拓展来讲就是filter()允许指定一个可选的thisArg参数，这个参数用于在执行回调函数时设置this的值。具体如何，我们来看下面这个通俗易懂的例子就理解了：

js 复制代码

const numbers = [10, 20, 30, 40, 50];
const threshold = 30;

function isGreaterThanThreshold(element) {
  return element > this;
}

const result = numbers.filter(isGreaterThanThreshold, threshold);

console.log(result); // 输出 [40, 50]

在这个示例中，我们想要从numbers这个数字数组中筛选出大于指定阈值的元素。让我们来逐步看看这个代码片段：

定义数组和阈值：

js 复制代码

const numbers = [10, 20, 30, 40, 50];
const threshold = 30;

首先，我们创建了一个名为numbers的数组，其中包含一些数字。然后，我们定义了一个阈值threshold，用于筛选出大于该阈值的数组元素。

编写测试函数：

js 复制代码

function isGreaterThanThreshold(element) {
    return element > this;
}

然后，我们定义了一个名为isGreaterThanThreshold的函数，该函数用于测试数组中的每个元素是否大于指定的阈值。在这个函数中，我们使用了this关键字，这是后面在filter()方法中传递的参数。

使用filter()方法：

js 复制代码

const result = numbers.filter(isGreaterThanThreshold, threshold);

接着，这里我们调用了Array.prototype.filter()方法，传递了两个参数：筛选函数isGreaterThanThreshold和this的值threshold。filter()方法将遍历numbers数组的每个元素，并将满足isGreaterThanThreshold条件的元素添加到新的数组result中。

输出结果：

js 复制代码

console.log(result); // 输出 [40, 50]

最后，我们打印筛选后的结果数组。在这个例子中，输出是大于阈值30的元素 [40, 50]。

总结

Array.prototype.filter()是数组对象身上的特有方法，我们通过提供一个数组和函数方法，可以使得筛选数组元素变得非常简单，省去了遍历的操作。而且，filter() 方法实质上是创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素，返回的结果是会影响原数组的。

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

博主的开源Git仓库: gitee.com/cheng-bingw...

学习MDN文档之数组过滤——Array.prototype.filter()

序言

Try a try(尝试一下)

基本语法

示例

使用场景

1. 筛选数组元素

2. 删除数组中的空值

3. 使用thisArg参数

总结

结语

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

3. 使用`thisArg`参数