JS List过滤函数|极客笔记

JS List过滤函数

在JavaScript编程中，经常会遇到需要对列表进行过滤的情况。例如，从一个包含许多元素的数组中筛选出满足特定条件的元素。为了简化这个过程，我们可以使用过滤函数来实现这一功能。

什么是过滤函数

过滤函数是JavaScript中的数组方法之一，用于按照指定的条件从数组中筛选出符合条件的元素，并返回一个新的数组。过滤函数接受一个回调函数作为参数，这个回调函数会对每个元素进行判断，返回true则保留该元素，返回false则过滤掉该元素。

过滤函数的语法

过滤函数的语法如下所示：

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

array: 要进行过滤操作的数组
callback: 用于测试每个元素的函数，接受三个参数
- element: 当前正在处理的元素
- index(可选): 当前正在处理的元素的索引
- array(可选): 调用了filter方法的数组本身
thisArg(可选): 执行callback时的this值

过滤函数的示例

让我们通过一个简单的示例来演示如何使用过滤函数。

假设有一个数字数组，我们需要筛选出其中大于5的元素。

const numbers = [1, 6, 3, 8, 2, 9, 4, 7];
const filteredNumbers = numbers.filter(num => num > 5);

console.log(filteredNumbers);

运行以上代码，输出为：

[6, 8, 9, 7]

在这个示例中，filter方法对numbers数组进行了筛选，保留了大于5的元素，返回一个新数组filteredNumbers。

过滤函数的应用场景

过滤函数在实际开发中有许多应用场景，例如：

数据过滤

在处理从后端获取的数据时，可能需要从大量的数据中筛选出符合条件的数据，这时可以使用过滤函数来实现。

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Cathy', age: 20 },
  { name: 'David', age: 35 }
];

const filteredUsers = users.filter(user => user.age < 30);

console.log(filteredUsers);

条件筛选

有时候需要根据多个条件进行筛选，可以在回调函数中添加多个条件来实现。

const products = [
  { name: 'iPhone', price: 999, brand: 'Apple' },
  { name: 'Galaxy', price: 899, brand: 'Samsung' },
  { name: 'Pixel', price: 799, brand: 'Google' },
];

const filteredProducts = products.filter(product => product.price < 900 && product.brand !== 'Apple');

console.log(filteredProducts);