JavaScript filter 方法

最后修改于 2025 年 4 月 4 日

在本文中，我们将展示如何使用 JavaScript 中的 filter 方法来过滤数组。

数组过滤

数组过滤是指使用由提供的函数实现的测试创建包含通过测试的元素的的新数组的操作。filter 方法创建一个新数组，其中包含所有通过测试的元素。

此方法不会改变原始数组，而是返回一个新数组。回调函数应返回 true 以保留元素，或返回 false 以排除它。

当您需要根据特定条件从数组中提取元素时，filter 方法非常有用。它提供了一种干净且函数式的方式来处理数组，而无需修改原始数据。

基本 filter 示例

以下示例演示了 filter 方法的基本用法。

main.js

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(numbers);      // Original array unchanged
console.log(evenNumbers);  // New filtered array

我们创建一个数字数组，并过滤出所有偶数。原始数组保持不变。filter() 方法返回一个新数组，其中仅包含通过测试的元素。

$ node main.js
[ 1, 2, 3, 4, 5, 6 ]
[ 2, 4, 6 ]

过滤数组中的对象

filter 方法可用于对象数组以查找特定项目。

main.js

const products = [
  { name: 'Laptop', price: 999 },
  { name: 'Phone', price: 699 },
  { name: 'Tablet', price: 299 }
];

const expensiveProducts = products.filter(product => product.price > 500);

console.log(expensiveProducts);

我们过滤产品对象数组，以查找价格超过 500 的商品。回调函数检查每个对象的 price 属性。仅满足条件的物体才会被包含在新数组中。

$ node main.js
[
  { name: 'Laptop', price: 999 },
  { name: 'Phone', price: 699 }
]

使用索引参数进行过滤

filter 回调可以接受一个索引参数来使用元素的位置。

main.js

const fruits = ['apple', 'banana', 'orange', 'kiwi', 'mango'];
const filteredFruits = fruits.filter((fruit, index) => index % 2 === 0);

console.log(filteredFruits);

我们过滤一个数组，只获取偶数索引处的元素。回调函数接收元素及其索引。我们使用索引来确定要包含哪些元素。

$ node main.js
[ 'apple', 'orange', 'mango' ]

使用 thisArg 参数进行过滤

filter 方法可以接受第二个参数来设置 this 值。

main.js

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filterObj = {
  min: 3,
  max: 7,
  checkRange(num) {
    return num >= this.min && num <= this.max;
  }
};

const filteredNumbers = numbers.filter(function(num) {
  return this.checkRange(num);
}, filterObj);

console.log(filteredNumbers);

我们使用一个对象来定义我们的过滤条件，并将其作为第二个参数传递。回调函数内的 this 值指的是我们的 filter 对象。这允许我们在 filter 逻辑中使用对象方法。

$ node main.js
[ 3, 4, 5, 6, 7 ]

过滤掉虚值

filter 方法可用于从数组中删除所有虚值。

main.js

const mixedValues = [0, 1, false, 2, '', 3, null, undefined, NaN, 4];
const truthyValues = mixedValues.filter(Boolean);

console.log(truthyValues);

我们使用 Boolean 构造函数作为我们的 filter 函数。这将自动将每个值转换为布尔值，并且仅保留真值。类似 0、false、空字符串、null、undefined 和 NaN 的虚值将被删除。

$ node main.js
[ 1, 2, 3, 4 ]

来源

数组 filter - 语言参考

在本文中，我们演示了如何使用 filter() 方法来处理 JavaScript 中的数组。

作者

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。自 2007 年以来，我一直在撰写编程文章。迄今为止，我已经撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出所有 JS 数组函数。