Javascript filter()方法：索引、多条件、删除重复、地图

JavaScript filter()函数是一个重要的方法，它允许你从一个现有的数组中得到一个新的数组，只过滤符合某些条件的元素。在这篇文章中，我将告诉你如何使用filter()函数，包括index参数，使用多个条件，以及删除重复的元素、我们将学习如何使用includes()方法，以及它与map()和find()方法有什么不同。

1. Filter()函数的基础知识和索引参数

在JavaScript中，filter()方法是一种只提取一个数组中满足某些条件的元素并创建一个新数组的方法。

其基本语法如下所示。

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

filter()方法接收一个回调函数作为参数，对数组中的每个元素执行，并返回一个true或false的值。此时，回调函数返回一个新的数组，该数组仅由返回值为true的元素组成。

让我们通过一个简单的例子来看看如何使用这个函数。

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

在我们的例子中，我们收到了箭头函数number => number % 2 === 0作为一个回调函数。而当我们应用它时，我们可以看到它返回了一个只包含2的新数组，4，它返回的值是true。

像forEach()和map()函数一样，回调函数可以接受两个可选参数。在下面的例子中，这些是第2和第3个参数，分别命名为index和array，用于访问当前元素的索引和数组本身。你可以自由地命名这些参数，不管你喜欢什么。

const numbers = [10, 20, 30, 40, 50];
 
numbers.filter((number, index, array) => {
    return index % 2 === 0
});
 
// Output: [10, 30, 50]

例子中的filter()函数使用当前元素的索引作为index参数，并定义了一个条件，即只返回位置为0、2和4的元素。被返回。

2. 使用多个条件

有两种方法来使用多个条件.

第一种是使用关系操作符&&来设置多个条件。接下来, 我们将检查两个条件: 一个数字是3的倍数并且大于5.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0 && number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

第二种是在一个链中使用多个filter函数，比如这样

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0).filter(number => number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

3. 用filter()删除重复元素

使用filter()函数是一种从数组中去除重复元素的简单方法。

让我们从示例代码开始。

const array = [1, 2, 3, 2, 4, 3, 5, 1];
 
const uniqueArray = array.filter((element, index, array) => {
  return array.indexOf(element) === index;
});
 
console.log(uniqueArray);
// Output: [1, 2, 3, 4, 5]

上面例子中的回调函数同时使用了我们在第1节中看到的index和array参数来构建算法。

Array.indexOf(element)方法返回数组中与element值匹配的最小的索引。 (如果它不存在，则返回-1）。

如果当前元素是数组中唯一的值，array.indexOf()方法的返回值就等于当前元素的index值。反之，如果回调函数的返回值是false，说明有多个值，会被回调函数过滤掉。

4. 用includes()定义一个回调函数

String.includes(string)方法返回值string是否被包含在字符串中。与filter()方法结合使用，这是一个很好的方法，可以只选择字符串数组中包含特定子字符串的元素。

让我们看一个简单的例子。

const subjects = ["Basic English", "Basic Chinese", "Intermediate Japanese", "Intermediate French", "Basic Chemistry"]
 
const basics = subjects.filter(subject => subject.includes("Basic"))
 
console.log(basics)
// Output: [ 'Basic English', 'Basic Chinese', 'Basic Chemistry' ]

在上面的例子中，includes方法只对包含字符串"Basic"的科目返回true值。因此，在五门课程中，我们只能够过滤那些包含字符串"Basic"的课程。

正如你所看到的，这两种方法可以在很多情况下一起使用，实现协同效应。

5. 与map()的区别

filter()函数和forEach(), map(), 以及reduce()都是数组方法，可以与这些是你可以使用的数组方法。每个方法都有自己的功能，所以知道它们的区别并好好使用它们是很重要的。

关于每个方法的更详细的解释，请看它们各自的帖子。

forEach()：遍历数组的所有元素并执行给定的回调函数。
map()：对每个元素应用回调函数，并返回一个带有回调函数返回值的新数组。
reduce()：应用一个函数，将前一个值与当前值结合起来，将数组中的值相加为一个值。

与map()函数的主要区别是回调函数和它返回的数组。

map()函数的回调函数返回一个新的元素，这些值组成了新的数组，所以数组的长度总是相同的。 filter()函数的回调函数返回一个引用，决定哪些元素将被包含在新数组中。新数组的长度将总是小于或等于旧数组，而且元素的值不会改变。

6. 与find()的区别

Array.find(condition)方法在数组中找到一个符合回调函数condition中定义的条件的元素并返回该值. 如果有多个元素，它只返回索引最低的那个元素，如果没有找到，则返回undefined。

回调函数的形式与filter()函数相同。

const result = array.find(callback((element, index, array) => {
  // Condition logic
  // Return true or false
}))

我们来看看一个使用例子。

const numbers = [1, 2, 3, 4, 5, 6];
 
const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});
 
console.log(firstEvenNumber);
// Output: 2

它返回的值是2，这是符合条件的最小索引的值。

正如你所看到的，find()方法与filter()方法相同，它找到了一个符合条件的值，但与filter()方法不同，它只返回一个值。

7. 总结

我们已经看到了filter函数是如何被用来过滤一个给定数组中符合条件的元素的。虽然这个方法在单独使用时很强大，但与其他数组方法结合使用时，还有很多可能性、值得探索与其他函数和方法结合使用的方法。

map()reduce()