正文

轻松掌握JS中的filter方法：筛选数组必备技巧及实战案例

/0 浏览量
0520

在JavaScript中，filter 方法是数组处理中非常实用的一个函数。它可以帮助我们筛选出满足特定条件的数组元素，从而构建出新的数组。掌握 filter 方法，可以让我们在处理数组时更加高效和灵活。

一、filter 方法简介

filter 方法接收一个回调函数作为参数，该回调函数对数组的每个元素执行一次，并返回一个布尔值。根据这个布尔值，filter 方法会筛选出所有返回值为 true 的元素，构成一个新的数组。

1.1 语法

array.filter(callback(element, index, array))
  • callback：对数组中的每个元素执行的函数。
  • element：当前正在处理的元素。
  • index：（可选）当前正在处理的元素的索引。
  • array：（可选）当前正在处理的数组。

1.2 返回值

filter 方法返回一个新数组，其中包含所有通过回调函数测试的元素。

二、filter 方法技巧

2.1 使用箭头函数

在ES6中，我们可以使用箭头函数来简化回调函数的编写。

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

2.2 使用多个条件

filter 方法可以同时使用多个条件来筛选数组元素。

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

const youngUsers = users.filter(user => user.age < 30 && user.name.startsWith('A'));

2.3 链式调用

filter 方法可以与其他数组方法链式调用，实现更复杂的操作。

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

三、实战案例

3.1 筛选偶数

假设我们有一个数字数组，我们需要筛选出其中的偶数。

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]

3.2 筛选用户

假设我们有一个用户数组，我们需要筛选出年龄小于30岁且名字以’A’开头的用户。

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

const youngUsers = users.filter(user => user.age < 30 && user.name.startsWith('A'));
console.log(youngUsers); // [{ name: 'Alice', age: 25 }]

3.3 筛选电影

假设我们有一个电影数组，我们需要筛选出评分大于8.5的电影。

const movies = [
  { title: 'The Shawshank Redemption', rating: 9.3 },
  { title: 'The Godfather', rating: 9.2 },
  { title: 'The Dark Knight', rating: 9.0 },
  { title: 'Schindler\'s List', rating: 8.9 }
];

const highRatingMovies = movies.filter(movie => movie.rating > 8.5);
console.log(highRatingMovies);
// [
//   { title: 'The Shawshank Redemption', rating: 9.3 },
//   { title: 'The Godfather', rating: 9.2 }
// ]

通过以上实战案例，我们可以看到 filter 方法在处理数组时的强大功能。掌握 filter 方法，可以帮助我们轻松筛选出满足特定条件的数组元素，从而实现各种复杂的功能。

-- 展开阅读全文 --