JS 中的 filter 方法的使用

JavaScript 中的 filter 方法是一个数组的高阶函数，用于创建一个新数组，包含通过所提供函数实现的测试的所有元素。这个方法不会改变原数组，而是返回一个新数组，其中包含满足条件的元素。

基本用法

filter的过滤逻辑是根据回调函数返回的布尔类型的值来处理的， 返回false代表丢弃该元素

const array = [1, 2, 3, 4, 5];

// 保留偶数元素
const evenNumbers = array.filter(element => {
	return element % 2 === 0
});

console.log(evenNumbers); // 输出：[2, 4]

使用箭头函数简化

const array = [1, 2, 3, 4, 5];

// 保留偶数元素
const evenNumbers = array.filter(element => element % 2 === 0);

console.log(evenNumbers); // 输出：[2, 4]

回调函数参数

• element（当前元素）：数组中正在处理的当前元素。
• index（可选）：当前元素的索引。
• array（可选）：调用 filter 的数组本身。

示例

使用索引

const array = ['apple', 'banana', 'cherry', 'date'];

// 保留长度大于5的字符串
const longWords = array.filter((word, index) => word.length > 5);

console.log(longWords); // 输出：['banana', 'cherry']

处理对象数组

const users = [
  { name: 'Alice', age: 21 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 23 }
];

// 保留年龄大于21岁的用户
const adults = users.filter(user => user.age > 21);

console.log(adults); // 输出：[{ name: 'Bob', age: 22 }, { name: 'Charlie', age: 23 }]

注意事项

• filter 方法返回一个新数组，包含所有通过测试的元素。如果没有任何元素通过测试，则返回一个空数组。
• filter 不会修改原数组，它只是基于原数组创建一个新数组。
• filter 适用于需要根据特定条件筛选数组元素的场景。

filter 是处理数组时非常有用的工具，特别是在需要根据某些条件过滤出数组中的特定元素时。它提供了一种简洁且易于理解的方式来操作数组数据。