JS数组.filter()

在 JavaScript 中，数组是一种常用的数据结构。数组中的每个元素可以是任何类型的值，包括数字、字符串、布尔值、对象、甚至是另一个数组。在 JavaScript 中，可以使用以".filter()"结尾的函数来过滤数组。

概述

.filter() 是一个在数组中找到符合条件的元素的内置函数。它返回一个新数组，其中包含原始数组中通过测试的所有元素。可以使用 filter() 过滤器对数组中的元素进行筛选，并将满足特定条件的元素放入一个新的数组中。函数通过一个回调函数对每个数组元素进行测试，如果该元素通过测试，则将其添加到新的数组中。回调函数接受三个参数：元素，索引和数组。

下面是一个简单的例子，它演示了如何使用 filter() 来选出一个数组中大于等于 18 岁的所有人。

const ages = [19, 20, 17, 18, 21];
const filteredAges = ages.filter(function(age) {
  return age >= 18;
});

console.log(filteredAges); // [19, 20, 18, 21]

在这个例子中，我们定义了一个名为 ages 的数组，并使用 filter() 方法过滤了年龄大于等于 18 岁的人。回调函数将每个年龄作为参数，并返回一个布尔值，用于指示该年龄是否应该包含在结果数组中。如果返回 true，则年龄将包含在过滤后的数组中。

语法

filter() 方法的语法如下所示：

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

以下是参数的定义：

• callback: 必需。用于测试每个元素的函数，这个参数至少接受一个参数(element)，代表数组中的每个元素，返回一个布尔值，用于表示是否包含该元素在过滤后的新数组中；
• element: 必需。当前正在处理的元素；
• index: 可选。当前正在处理的元素的索引值；
• array: 可选。被调用的数组；
• thisArg: 可选。执行回调函数时的上下文对象。

示例

过滤银行账户余额小于 1000 的用户

const users = [
    { id: 1, name: '张三', balance: 1220 },
    { id: 2, name: '李四', balance: 50 },
    { id: 3, name: '王五', balance: 10010 },
    { id: 4, name: '赵六', balance: 10 },
];

const poorUsers = users.filter(user => user.balance < 1000);
console.log(poorUsers); // [{ id: 2, name: '李四', balance: 50 }, { id: 4, name: '赵六', balance: 10 }]

找出一个数组中所有的偶数

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

过滤掉包含特定关键字的元素

const fruits = ['苹果', '香蕉', '橙子', '葡萄', '芒果', '猕猴桃'];
const filteredFruits = fruits.filter(fruit => !fruit.includes('果'));
console.log(filteredFruits); // ['猕猴桃']

总结

.filter() 是一种非常有用的方法，它能够快速过滤出数组中符合特定条件的元素，将它们放入一个新的数组中，以便进一步处理。通过回调函数，我们可以使用任何复杂度的条件来过滤元素，让这个方法变得非常灵活。在 JavaScript 开发中，过滤器是一个非常常用的方法之一，在实际项目开发中可以充分利用，提高开发效率。