Javascript中关于Array.filter()的妙用详解

当我们需要对一个数组进行筛选操作时，通常会使用Array.filter()方法。该方法接受一个函数作为参数，用于对数组进行筛选并返回满足条件的数组元素。下面是一个基本的示例：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

上述代码中，numbers数组中的元素包括1、2、3、4、5，我们使用filter()方法过滤出其中的偶数，最终得到包含2和4的evenNumbers数组。

在本篇攻略中，我们将探讨Array.filter()方法的更多用法，深入了解它的妙用。

一、初步了解filter()方法

首先，我们需要了解一下filter()方法的基本用法和语法。

filter()方法用于对数组进行筛选操作，返回满足条件的数组元素，其中接受的参数是一个用来过滤数组的回调函数。该回调函数接受3个参数：

• value：当前filter()方法正在遍历的数组元素。
• index：当前filter()方法正在遍历的数组元素的索引。
• array：当前被遍历的数组。

如下是filter()方法的基本语法：

array.filter(callback[, thisArg])

其中，callback是用来对数组进行筛选的回调函数，可以接受三个参数，并返回一个布尔值。thisArg参数可选，用于指定callback函数内部的this指向。

下面，我们来看一些更多的示例。

二、示例1：字符串中查找元音字母

我们有一个字符串，现在需要过滤出其中的元音字母。这时，我们可以使用Array.filter()方法来实现。

const vowels = ['a', 'e', 'i', 'o', 'u'];
const str = 'hello world';
const result = Array.from(str.toLowerCase()).filter(char => vowels.includes(char));
console.log(result); // ['e', 'o', 'o']

上述代码中，我们定义了一个包含所有元音字母的数组vowels，并将原字符串转为小写字母。接着，使用filter()方法和Array.includes()方法遍历字符串中的每一个字符并判断是否为元音字母，筛选出结果，并最终将结果转成数组返回。这样，我们便得到了['e', 'o', 'o']这个数组。

三、示例2：使用filter()进行去重

有一个数组，其中包含多个重复元素，我们需要去重并返回一个新的数组。这时，我们可以结合filter()和Array.indexOf()来实现。

const arr = [1, 2, 3, 2, 4, 1, 5];
const result = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(result); // [1, 2, 3, 4, 5]

上述代码中，我们使用filter()方法和Array.indexOf()来实现数组去重。在过滤器函数中，我们传递了两个参数item和index，分别代表当前正在遍历的元素和元素的索引，紧接着在过滤器函数中使用Array.indexOf()来判断元素是否是重复的，如果不重复就返回该元素，否则过滤掉。最终，我们得到了去掉重复元素后的数组[1, 2, 3, 4, 5]。

四、总结

本篇文章主要介绍了Array.filter()方法的妙用，从基础的使用，到一些高级用法。在实际开发中，Array.filter()方法是我们经常使用的方法之一，可以很方便的对数组进行筛选操作，提高开发效率和代码可读性。