js filter()函数详解|极客笔记

js filter()函数详解

1. 简介

JavaScript中的filter()函数是一个非常有用的数组方法，它用于创建一个新的数组，其中包含满足指定条件的原始数组中的元素。

filter()函数接受一个回调函数作为参数，该回调函数在数组的每个元素上调用，返回值决定了是否将该元素包含在新的数组中。

filter()函数不会改变原始数组，而是返回一个新的数组。

2. 语法

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

callback：必需，用于对数组的每个元素进行检测的函数。
element：必需，当前元素的值。
index：可选，当前元素的索引。
array：可选，原始数组。
thisArg：可选，执行回调函数时使用的 this 值。

3. 示例代码

// 示例数组
const numbers = [1, 2, 3, 4, 5];

// 使用filter()函数筛选出大于2的元素
const filteredNumbers = numbers.filter(function (element) {
  return element > 2;
});

console.log(filteredNumbers);

4. 运行结果

[3, 4, 5]

5. filter()函数的功能

filter()函数是一个非常强大且灵活的函数，它可以根据我们的需求来筛选出需要的元素，并返回一个新的数组。下面我们将更详细介绍filter()函数的功能。

5.1 筛选出奇数

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

const oddNumbers = numbers.filter(function (element) {
  return element % 2 !== 0;
});

console.log(oddNumbers);

运行结果：

[1, 3, 5]

5.2 筛选出偶数

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

const evenNumbers = numbers.filter(function (element) {
  return element % 2 === 0;
});

console.log(evenNumbers);

运行结果：

[2, 4]

5.3 筛选出大于某个值的元素

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

const greaterThanThree = numbers.filter(function (element) {
  return element > 3;
});

console.log(greaterThanThree);

运行结果：

[4, 5]

5.4 筛选出包含特定字符的元素

const names = ['Alice', 'Bob', 'Charlie', 'David'];

const namesWithA = names.filter(function (element) {
  return element.includes('a');
});

console.log(namesWithA);

运行结果：

['Alice', 'Charlie']

6. filter()函数的注意事项

在使用filter()函数时，需要注意一些细节和问题。

6.1 返回一个新的数组

filter()函数不会改变原始数组，而是返回一个新的数组，里面包含满足条件的元素。

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

const filteredNumbers = numbers.filter(function (element) {
  return element > 2;
});

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(filteredNumbers); // [3, 4, 5]

6.2 使用箭头函数

我们还可以使用箭头函数来简化回调函数的写法。

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

const greaterThanTwo = numbers.filter(element => element > 2);

console.log(greaterThanTwo); // [3, 4, 5]

6.3 空数组的情况

当原始数组为空时，filter()函数会返回一个空数组。

const emptyArray = [];

const filteredArray = emptyArray.filter(element => element > 0);

console.log(filteredArray); // []

6.4 使用`thisArg`

在回调函数中，我们可以使用this关键字来访问当前元素的值。但是，有时候我们需要在回调函数中使用其他的this值，在这种情况下，我们可以使用thisArg参数来指定this值。

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

function greaterThanThreshold(element) {
  return element > this.threshold;
}

const filteredArray = numbers.filter(greaterThanThreshold, { threshold: threshold });

console.log(filteredArray); // [4, 5]