JS中的array.filter

在Javascript中，数组是一种常见的数据结构。数组提供了一系列可用的方法来操作和处理数组中的元素。其中一个常用的方法是filter，它允许您根据规则从数组中筛选出某些元素并返回一个新的数组。

简介

filter方法是数组原型对象的一部分，因此可以通过任何数组实例直接调用。它采用一个回调函数作为参数，该回调函数将数组中的每个元素作为参数进行处理，并根据返回值来决定是否将该元素包含在最终的结果数组中。

语法

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

• callback：必需，一个回调函数，用于对每个元素进行处理并返回一个布尔值，决定元素是否被包含在结果数组中。
  • element：必需，当前正在处理的元素。
  • index：可选，当前元素的索引。
  • array：可选，调用filter方法的数组。
• thisArg：可选，传入回调函数的this值（即回调函数中的this指向）。

示例

让我们看一个简单的示例，假设我们有一个数字数组，我们希望将其中的偶数筛选出来：

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

const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers);

输出：

[2, 4, 6, 8, 10]

在这个示例中，我们通过传递一个回调函数给filter方法来实现筛选。回调函数将每个元素作为输入，并对其进行求余操作。如果元素是偶数，则返回true，否则返回false，从而决定是否将元素包含在结果数组中。

高级技巧

使用thisArg参数

filter方法的thisArg参数允许您指定回调函数中的this值。这在使用面向对象的方式时非常有用。

const person = {
  name: 'John',
  age: 30,
  isAdult() {
    return this.age >= 18;
  }
};

const people = [person, {name: 'Jane', age: 15}, {name: 'Jim', age: 20}];

const adultPeople = people.filter(function(person) {
  return this.isAdult();
}, person);

console.log(adultPeople);

输出：

[
  {name: 'John', age: 30},
  {name: 'Jim', age: 20}
]

在此示例中，我们将person对象传递给了filter方法的thisArg参数。在回调函数中，我们通过this.isAdult()来引用person对象的isAdult方法，以筛选出年龄超过18的人。

总结

filter是一个非常有用的数组方法，允许您根据自定义的条件从数组中筛选出元素。通过传递一个回调函数给filter方法，您可以实现高度灵活的筛选逻辑，并获得一个新的数组作为结果。无论是在简单的筛选还是复杂的条件下，filter可以帮助程序员更高效地处理和操作数组数据。