JavaScript 数组 filter() 方法

JavaScript filter() 语法

filter() 是 JavaScript 数组的一个方法，它用于遍历一个数组。filter() 方法会为数组每个元素依次执行一次相同的函数，然后返回一个数组（该数组包含所有符合条件的元素）。

语法：

arr.filter(callbackFn, thisArg)

说明：

filter() 方法可以接收以下 2 个参数。

callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
thisArg（可选）：回调函数 this 的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数接收 3 个参数，说明如下。

element（必选）：表示当前处理的数组元素。
index（可选）：表示当前处理的元素下标。
array（可选）：表示当前数组对象（代表整个数组）。

当回调函数返回 true 时，则会将当前元素添加到新数组中去。当回调函数返回 false 时，则不会将当前元素添加到新数组中去。

注意:

filter() 方法不会修改原数组，而是返回一个新数组。
对于没有值的数组元素（即空槽元素），不会执行 filter() 方法的回调函数。

数组的遍历方法

对于 JavaScript 数组来说，它主要有以下 5 种遍历方法。其中，map()、filter()、reduce()、reduceRight() 这 4 种可以看成是对 forEach() 方法的进一步封装。

forEach()：只会单纯遍历数组，在回调函数中对每一个元素进行 “相同操作”。它不会返回任何值，只是操作完就算了。
map()：遍历数组的同时，在回调函数中对每个元素进行 “相同操作”。然后将 “处理后的元素” 添加到新数组中，最终返回一个新数组。
filter()：遍历数组的同时，在回调函数中对每个元素进行 “过滤操作”。然后将 “符合条件的元素” 添加到新数组中，最终返回一个新数组。
reduce()：遍历数组的同时，在回调函数中对每个元素进行 “累积操作”。最终返回一个值（这个值不一定是数组）。
reduceRight()：功能与 reduce() 方法相同，只不过 reduce() 是从左到右操作数组元素，而 reduceRight() 是从右到左操作数组元素。

JavaScript filter() 摘要

属于	JavaScript Array 对象
使用频率	高
修改原数组	否
官方文档	查看
MDN	查看

JavaScript filter() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript filter() 方法是如何使用的。

示例 1：filter() 基本用法

运行代码

const arr = [3, 9, 1, 12, 50, 21];
const resultArr = arr.filter(function(element) {
    return element > 10;
});
console.log(resultArr);

运行结果如下。

[12, 50, 21]

分析：

在这个例子中，我们使用 filter() 方法来过滤出（得到）所有大于 10 的元素。对于 filter() 方法实现的功能，我们可以使用 forEach() 方法同样也可以实现，上面例子等价于：

const arr = [3, 9, 1, 12, 50, 21];
const resultArr = [];
arr.forEach(function(element) {
    if(element> 10) {
        resultArr.push(element);
    }
});
console.log(resultArr);

同样的功能，相比之下 filter() 方法实现起来会比 forEach() 简单很多。

示例 2：filter() 的参数是箭头函数

运行代码

const arr = [3, 9, 1, 12, 50, 21];
const resultArr = arr.filter(element => element > 10);
console.log(resultArr);

运行结果如下。

[12, 50, 21]

分析：

箭头函数是一个非常方便的语法。

filter() 与 every()、some() 的区别

filter()、every()、some() 这 3 个方法非常相似它们的区别如下。

filter()：用于从数组中筛选出所有满足某个条件的元素，返回的是一个 “新数组” 。如果回调函数对当前元素返回 true，则该元素会被包含在新数组中。如果回调函数对当前元素返回 false，则该元素会被排除在新数组之外。
every()：用于判断数组中所有元素是否都满足某个条件，返回的是一个 “布尔值”。如果全部都满足，那么就返回 true；只要有一个不满足，那么就返回 false。
some()：用于判断数组中是否存在一个元素满足某个条件，返回的是一个 “布尔值”。只要有一个满足，那么就返回 true；只有全部都不满足，才会返回 false。

其中，every() 方法类似于 “与运算”，而 some() 方法类似于 “或运算”。小伙伴们这样去对比，会更容易理解和记忆。

在实际开发中，至于选择使用哪个方法，这个取决于你的开发需求。

如果你需要获取所有符合条件的元素到一个新数组中，则推荐使用 filter()。
如果你需要确认所有元素都符合条件，则推荐使用 every()。
如果你只需要确认至少一个元素符合条件，则推荐使用 some()。