JS filter返回值|极客笔记

JS filter返回值

在JavaScript中，数组的filter方法是一种常用的数组处理方式，用于筛选数组中符合指定条件的元素，并返回一个新的数组。filter方法接受一个回调函数作为参数，该回调函数返回值为true或false决定是否保留当前元素。在本文中，我们将详细介绍filter方法的返回值以及如何使用它。

`filter`方法的基本语法

filter方法是数组原型上的一个方法，调用方式为：

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

其中：

callback：回调函数，用于对数组中的每个元素进行处理
element：当前处理的数组元素
index：当前处理的数组元素的索引
array：原始数组对象
thisArg：执行回调函数时使用的this值

filter方法会遍历数组中的每个元素，对每个元素都会调用一次回调函数。如果回调函数返回true，那么保留该元素；如果返回false，则不保留。最终，filter方法会返回一个新的数组，其中包含了符合条件的元素。

下面是一个简单的示例，演示如何使用filter方法：

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

const filteredNumbers = numbers.filter(num => num % 2 === 0);

console.log(filteredNumbers); // [2, 4]

在上面的示例中，我们定义了一个数字数组numbers，然后使用filter方法筛选出所有偶数，最终返回一个新的数组filteredNumbers。运行该代码会输出[2, 4]，表示过滤出的偶数数组。

`filter`方法的返回值

filter方法的返回值是一个新的数组，包含了满足条件的元素。如果没有符合条件的元素，则返回一个空数组。

下面我们将分别演示在不同情况下，filter方法的返回值：

满足条件的情况

const fruits = ['apple', 'banana', 'grape', 'orange'];

const filteredFruits = fruits.filter(fruit => fruit.length > 5);

console.log(filteredFruits); // ['banana', 'orange']

在上面的代码中，我们定义了一个水果数组fruits，然后使用filter方法筛选出长度大于5的水果，最终返回一个新的数组filteredFruits。运行该代码会输出['banana', 'orange']，表示过滤出长度大于5的水果。

不满足条件的情况

const numbers = [1, 3, 5, 7, 9];

const filteredNumbers = numbers.filter(num => num % 2 === 0);

console.log(filteredNumbers); // []

在上面的代码中，我们定义了一个数字数组numbers，然后使用filter方法筛选出所有偶数，但由于数组中不存在偶数，最终返回一个空数组[]。这表明如果数组中没有符合条件的元素，filter方法会返回一个空数组。

使用`thisArg`参数

filter方法的最后一个参数thisArg可以用来指定在回调函数中使用的this值。这在需要在回调函数中使用对象的情况下非常有用。下面是一个示例：

const person = {
  minAge: 18,
  checkAge(age) {
    return age >= this.minAge;
  }
};

const ages = [15, 20, 25, 30];
const legalAges = ages.filter(person.checkAge, person);

console.log(legalAges); // [20, 25, 30]

在上面的示例中，我们定义了一个person对象，包含了minAge和checkAge方法用来判断年龄是否满足条件。然后我们使用filter方法筛选出所有合法年龄，通过使用thisArg参数传入person对象作为this值，确保在回调函数中可以正确获取minAge属性。