JavaScript 数组过滤：基于测试函数过滤数组元素

摘要：在本教程中，您将学习如何使用 JavaScript 数组 filter() 方法来过滤数组中的元素。

JavaScript 数组 filter() 方法介绍

在处理数组时，最常见的任务之一是创建一个包含原始数组元素子集的新数组。

假设您有一个城市对象的数组，每个对象包含两个属性：name 和 population。

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];Code language: JavaScript (javascript)

要查找人口超过 300 万的城市，您通常会使用 for 循环遍历数组元素并测试 population 属性的值是否满足条件，如下所示

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);Code language: JavaScript (javascript)

输出

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]Code language: JavaScript (javascript)

JavaScript 数组提供了 filter() 方法，允许您以更简洁的方式完成此任务。

以下示例返回与上面示例相同的结果

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);Code language: JavaScript (javascript)

在此示例中，我们调用 cities 数组对象的 filter() 方法，并传递一个函数来测试每个元素。

在函数内部，我们检查数组中每个城市的 population 是否大于 300 万。如果是，则函数返回 true，否则返回 false。

filter() 方法仅在结果数组中包含满足回调函数中测试条件的元素。

从 ES6 开始，您可以使用箭头函数使其更加简洁

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);Code language: JavaScript (javascript)

JavaScript 数组 filter() 方法详解

以下是 filter() 方法的语法

arrayObject.filter(callback, contextObject);Code language: CSS (css)

filter() 方法创建一个新的数组，其中包含通过 callback() 函数实现的测试的全部元素。

在内部，filter() 方法迭代数组中的每个元素，并将每个元素传递给 callback 函数。如果 callback 函数返回 true，则将该元素包含在返回的数组中。

filter() 方法接受两个命名参数：一个 callback 函数和一个可选对象。

与数组对象的其它迭代方法（如 every()、some()、map() 和 forEach()）一样，callback 函数具有以下形式

function callback(currentElement, index, array){
   // ...
}Code language: JavaScript (javascript)

callback 函数接受三个参数

currentElement 参数是数组中当前正在由 callback 函数处理的元素。
currentElement 的 index 正在由 callback 函数处理。
正在遍历的 array 对象。

index 和 array 参数是可选的。

filter() 方法的 contexObject 参数是可选的。如果您传递 this 值，则可以在 callback 函数内部使用 this 关键字引用它。

重要的是要注意 filter() 方法不会改变原始数组。

更多 JavaScript 数组 filter() 方法示例

由于 filter() 方法返回一个新数组，因此您可以将结果与其他数组方法（如 sort() 和 map()）链接。

例如，以下说明了如何链接三个方法：filter()、sort() 和 map()：

cities
    .filter(city => city.population < 3000000)
    .sort((c1, c2) => c1.population - c2.population)
    .map(city => console.log(city.name + ':' + city.population));
Code language: JavaScript (javascript)

输出

Philadelphia:1526006
Houston:2099451
Chicago:2695598Code language: CSS (css)

工作原理。

首先，使用 filter() 方法过滤人口少于 300 万的城市。
其次，使用 sort() 方法按人口降序对结果城市进行排序。
第三，使用 map() 方法将数组元素输出到控制台。

以下示例说明了 contextObject 参数的使用，该参数指定一个可以在 callback() 函数中使用 this 关键字引用的对象

function isInRange(value) {
    if (typeof value !== 'number') {
        return false;
    }
    return value >= this.lower && value <= this.upper;
}

let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example'];

let range = {
    lower: 1,
    upper: 10
};

let numberInRange = data.filter(isInRange, range);

console.log(numberInRange); // [10, 1, 5]Code language: JavaScript (javascript)

输出

[ 10, 1, 5 ]Code language: JSON / JSON with Comments (json)

工作原理。

首先，定义 isInRange() 函数，该函数检查其参数是否为数字，并在对象的 lower 和 upper 属性指定的范围内。
接下来，定义一个包含数字、字符串和 undefined 的混合数据数组。
然后，定义具有两个属性 lower 和 upper 的 range 对象。
之后，调用 data 数组的 filter() 方法，并传入 isInRange() 函数和 range 对象。由于我们传入的是 range 对象，因此在 isInRange() 函数内部，this 关键字引用 range 对象。
最后，在控制台中显示结果数组。

在本教程中，您学习了如何使用 JavaScript 数组 filter() 方法来过滤数组中的元素，这些元素基于回调函数提供的测试。

本教程是否有帮助？