Javascript中的filter方法详解|极客笔记

Javascript中的filter方法详解

在Javascript中，filter()方法是一个用于过滤数组中元素的高阶函数。它接受一个回调函数作为参数，对数组中的每个元素都调用该回调函数，并返回满足条件的元素组成的新数组。

语法

filter()方法的语法如下：

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

callback: 必须。表示对数组中的每个元素所要执行的函数。
element: 表示数组中当前正在处理的元素。
index: 表示数组中当前正在处理的元素的索引。
array: 表示当前正在处理的数组。
thisArg: 可选。表示在执行回调函数时使用的this值。

示例

让我们通过一个示例来更好地理解filter()方法的用法。假设我们有一个包含一组数字的数组，我们想要筛选出所有大于或等于5的数字。

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

const filteredNumbers = numbers.filter(num => num >= 5);

console.log(filteredNumbers);

运行上面的代码，我们会得到输出：

[6, 8, 9, 7]

回调函数

在filter()方法中，回调函数通常包含三个参数：元素、索引和原数组。我们可以根据自己的需求仅使用其中的某些参数。

下面是一个回调函数使用所有参数的示例：

const words = ['hello', 'world', 'foo', 'bar'];

const filteredWords = words.filter((word, index, array) => {
  console.log(word, index, array);
  return word.length > 3;
});

console.log(filteredWords);

运行上面的代码，我们会看到回调函数分别输出每个单词、对应的索引和原数组，并得到输出：

hello 0 [ 'hello', 'world', 'foo', 'bar' ]
world 1 [ 'hello', 'world', 'foo', 'bar' ]
foo 2 [ 'hello', 'world', 'foo', 'bar' ]
bar 3 [ 'hello', 'world', 'foo', 'bar' ]
[ 'hello', 'world' ]

使用thisArg参数

filter()方法还允许我们指定在执行回调函数时使用的this值。这样可以方便地在回调函数中访问这个this值。

下面是一个使用thisArg参数的示例：

function isPositive(value) {
  return value > 0 && this.includeNegative === false;
}

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

const positiveNumbers = numbers.filter(isPositive, { includeNegative: false });

console.log(positiveNumbers);

运行上面的代码，我们会得到输出：