玩转 JS 数组的 .filter 方法，轻松过滤出您所需的数据

.filter 方法简介

.filter 方法是数组内置的迭代方法，它接收一个断言函数，这个函数会在迭代的每个数组成员上调用，如果函数的返回值是真值，就过滤出（即保留）这个成员，否则（是假值的话）就过滤掉这个成员。最终 .filter 返回的是原数组的一个子集。

举个例子，假设我们有一个数组 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 想从中过滤出所有偶数，可以使用如下代码：

const evenNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

在这个例子中，断言函数 function(number) { return number % 2 === 0; } 检查每个数组成员是否为偶数，如果为偶数，则返回真值，否则返回假值。.filter 方法会迭代数组的每个成员，如果断言函数返回真值，则将该成员保留在结果数组中，否则将该成员从结果数组中过滤掉。

.filter 方法的常见用法

.filter 方法在数据处理中有很多常见的用法，包括：

• 从数组中过滤出特定元素： 比如，从学生成绩数组中过滤出不及格的学生，或者从商品列表中过滤出缺货的商品。
• 根据条件对数组进行分组： 比如，将学生成绩数组按成绩等级分组，或者将商品列表按价格范围分组。
• 从数组中提取特定字段： 比如，从学生对象数组中提取所有学生的姓名，或者从商品对象数组中提取所有商品的价格。
• 将数组转换为其他数据结构： 比如，将数组转换为对象，或者将数组转换为哈希表。

.filter 方法的注意事项

使用 .filter 方法时，需要注意以下几点：

• 断言函数必须返回一个布尔值： 断言函数的返回值必须是真值或假值，否则会引发错误。
• 结果数组是原数组的一个子集： .filter 方法不会改变原数组，它只会返回一个包含满足条件的元素的新数组。
• 使用箭头函数可以简化代码： ES6 引入了箭头函数，可以简化断言函数的写法。例如，上面的代码可以改写为：

const evenNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

结语

.filter 方法是 JavaScript 数组内置的迭代方法，它可以根据给定的条件从数组中过滤出满足条件的元素，让数据处理更加高效。.filter 方法的用法非常灵活，可以满足各种数据处理需求，是 JavaScript 开发人员必备的利器之一。