JavaScript filter函数详解

1. 什么是filter函数

在JavaScript中，filter函数是数组的一个高阶函数，用于对数组中的元素进行过滤并生成一个新的数组。它接收一个回调函数作为参数，并将该函数应用于数组的每个元素。回调函数需要返回一个布尔值，来决定元素是否被保留在新数组中。

filter函数的基本语法如下所示：

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

其中，array是待过滤的数组，callback是回调函数，element是数组中的每个元素，index是元素的索引，array是原始数组。

2. 使用filter函数的场景

filter函数适用于那些需要根据特定条件对数组进行过滤的情况。例如，我们希望从一个已有的数组中获取满足某些条件的元素，便可以使用filter函数。

以下是一些使用场景的示例：

2.1 筛选出大于某个特定值的元素

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

const filtered = numbers.filter(number => number > 5);

console.log(filtered);
// 输出: [6, 7, 8, 9, 10]

在这个示例中，我们使用filter函数从数组numbers中筛选出大于5的元素，返回一个新的数组。

2.2 过滤掉数组中的空值

const values = ['Apple', '', 'Banana', '', 'Cherry'];

const filtered = values.filter(value => value !== '');

console.log(filtered);
// 输出: ['Apple', 'Banana', 'Cherry']

在这个示例中，我们使用filter函数过滤掉数组values中的空字符串，返回一个新的数组。

2.3 根据对象的属性筛选元素

const products = [
  { name: 'Apple', price: 1 },
  { name: 'Banana', price: 2 },
  { name: 'Cherry', price: 3 },
  { name: 'Durian', price: 4 },
];

const filtered = products.filter(product => product.price > 2);

console.log(filtered);
// 输出: [{ name: 'Cherry', price: 3 }, { name: 'Durian', price: 4 }]

在这个示例中，我们使用filter函数根据对象的price属性筛选出价格大于2的产品，返回一个新的数组。

3. filter函数的回调函数

filter函数的回调函数可以接收三个参数：element，index和array。其中，element是数组中的当前元素，index是当前元素的索引，array是数组本身。

我们可以根据需要选择使用这些参数。下面是一个简单的示例，展示了如何使用这些参数：

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

const filtered = numbers.filter((number, index, array) => {
  console.log(`当前元素:  ${number}`); console.log(`当前索引:$ {index}`);
  console.log(`原数组: ${array}`);
  console.log('----------');
  return number > 3;
});

console.log(filtered);
// 输出: [4, 5]

在这个示例中，我们打印了当前元素、当前索引和原数组，并通过返回值决定保留哪些元素。

4. filter函数的返回值

filter函数返回通过回调函数检测后为 true 的元素组成的新数组。如果没有符合条件的元素，则返回一个空数组。

以下是一个简单的示例：

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

const filtered = numbers.filter(number => number > 5);

console.log(filtered);
// 输出: []

在这个示例中，由于数组中的元素都小于或等于5，所以filter函数返回了一个空数组。

5. filter函数的thisArg参数

filter函数的最后一个参数thisArg可选，用于指定回调函数中的this值。如果未提供thisArg参数，回调函数的this值默认为undefined。

以下是一个示例，展示了如何使用thisArg参数：

function isEven(element) {
  return element % 2 === 0;
}

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

const filtered = numbers.filter(isEven, [2, 4]);

console.log(filtered);
// 输出: [2, 4]

在这个示例中，回调函数isEven内的this值被设置为[2, 4]。因此，filter函数只返回数组中的偶数元素。