295 - 集合过滤方法 - 集合过滤应用 - 数据筛选场景

集合过滤方法 - 集合过滤应用 - 数据筛选场景

在前端开发中，我们常常会遇到需要对数据集合进行筛选的场景，比如从商品列表中筛选出特定价格区间的商品，或者从用户列表中找出特定年龄段的用户。JavaScript 提供了多种强大的集合过滤方法，让我们能够轻松应对这些数据筛选任务。本文将深入介绍 JavaScript 中的集合过滤方法，并通过一些实用的例子展示它们在数据筛选场景中的应用。

常用的集合过滤方法

1. filter() 方法

filter() 方法是 JavaScript 数组对象的一个内置方法，它用于创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。其基本语法如下：

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

• callback：用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留在新数组中；返回 false 则表示该元素被过滤掉。
• element：当前正在处理的数组元素。
• index（可选）：当前元素的索引。
• array（可选）：调用 filter() 的数组。
• thisArg（可选）：执行 callback 时使用的 this 值。

2. find() 方法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。其基本语法如下：

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

参数含义与 filter() 方法类似。

3. findIndex() 方法

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。其基本语法如下：

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

数据筛选场景应用

场景一：从商品列表中筛选出特定价格区间的商品

假设我们有一个商品列表，每个商品对象包含 name（商品名称）和 price（商品价格）两个属性，我们需要筛选出价格在 100 到 200 之间的商品。

const products = [
    { name: 'iPhone', price: 999 },
    { name: 'iPad', price: 599 },
    { name: 'MacBook', price: 1999 },
    { name: 'Apple Watch', price: 150 },
    { name: 'AirPods', price: 120 }
];
const filteredProducts = products.filter(product => product.price >= 100 && product.price <= 200);
console.log(filteredProducts);

在上述代码中，我们使用 filter() 方法遍历 products 数组，对于每个商品对象，检查其价格是否在 100 到 200 之间，如果是，则将该商品对象添加到新数组 filteredProducts 中。

场景二：从用户列表中找出第一个年龄大于 30 岁的用户

假设我们有一个用户列表，每个用户对象包含 name（用户姓名）和 age（用户年龄）两个属性，我们需要找出第一个年龄大于 30 岁的用户。

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 32 },
    { name: 'Charlie', age: 28 },
    { name: 'David', age: 35 }
];
const foundUser = users.find(user => user.age > 30);
console.log(foundUser);

在上述代码中，我们使用 find() 方法遍历 users 数组，当找到第一个年龄大于 30 岁的用户时，立即返回该用户对象。

场景三：找出数组中第一个负数的索引

假设我们有一个包含正负数的数组，我们需要找出数组中第一个负数的索引。

const numbers = [1, 2, -3, 4, -5];
const negativeIndex = numbers.findIndex(num => num < 0);
console.log(negativeIndex);

在上述代码中，我们使用 findIndex() 方法遍历 numbers 数组，当找到第一个负数时，返回该负数的索引。

总结

通过合理运用这些集合过滤方法，我们可以高效地完成各种数据筛选任务，提高前端开发的效率和代码的可读性。希望本文能帮助你更好地理解和应用 JavaScript 中的集合过滤方法。