JS中如何使用 filter() 方法过滤数组元素

更新时间：2025年01月17日 16:56:03 作者：疯狂的沙粒

filter()方法是JavaScript中用于过滤数组元素的常用方法,它接受一个回调函数作为参数,返回一个新数组,本文总结了使用filter()方法的最佳实践,感兴趣的朋友一起看看吧

1. 引言

在 JavaScript 中，filter() 方法用于从数组中筛选出符合特定条件的元素，并返回一个新数组。与 map() 方法不同，filter() 返回的数组只包含满足条件的元素，而忽略不符合条件的元素。

filter() 是不可变的，即它不会改变原始数组，而是返回一个新的数组。

2. filter() 方法基本使用

filter() 方法概述

filter() 方法用于筛选出数组中符合条件的元素。它接受一个回调函数作为参数，这个回调函数对每个数组元素执行某种条件测试，返回 true 或 false。如果返回 true，该元素会被保留在新数组中；如果返回 false，则该元素会被排除。

语法

let newArray = array.filter(function(currentValue, index, array) {
  // 返回 true 或 false，决定元素是否保留
});

currentValue：当前元素的值。
index：当前元素的索引（可选）。
array：原数组本身（可选）。

示例：基本的 filter() 使用

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
  return value % 2 === 0;  // 只保留偶数
});
console.log(evenNumbers);  // 输出：[2, 4]

在上面的代码中，filter() 方法遍历了数组 arr 中的每个元素，并根据条件 value % 2 === 0 过滤出所有偶数，返回了一个新数组 evenNumbers。

3. filter() 与其他遍历方法的比较与 map() 的比较

map() 和 filter() 都是数组遍历方法，但它们的目的不同：

map() 用于遍历数组，并返回一个新的数组，该数组的每个元素是原数组元素经过回调函数处理后的结果。
filter() 用于筛选数组中的元素，并返回一个包含符合条件元素的新数组。

map() 示例：

let arr = [1, 2, 3, 4, 5];
let doubled = arr.map(function(value) {
  return value * 2;  // 将每个元素翻倍
});
console.log(doubled);  // 输出：[2, 4, 6, 8, 10]

filter() 示例：

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
  return value % 2 === 0;  // 只保留偶数
});
console.log(evenNumbers);  // 输出：[2, 4]

与 forEach() 的比较

forEach() 和 filter() 都可以用于遍历数组，但有几个关键的不同点：

forEach() 不会返回一个新数组，它只是对数组中的每个元素执行一个函数。
filter() 会返回一个新数组，且新数组只包含符合条件的元素。

forEach() 示例：

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(value) {
  console.log(value * 2);  // 输出：2, 4, 6, 8, 10（没有返回新数组）
});

filter() 示例：

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(value) {
  return value % 2 === 0;  // 只保留偶数
});
console.log(evenNumbers);  // 输出：[2, 4]

与 reduce() 的比较

reduce() 是一个不同于 filter() 的方法，它用于将数组中的所有元素聚合成一个单一的值（如总和、最大值等），而 filter() 用于返回符合条件的元素的新数组。

reduce() 示例：

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);  // 输出：15（数组元素的总和）

4. 实际项目中的 filter() 使用示例

示例 1：筛选符合条件的产品

假设你有一个产品列表，包含每个产品的名称和价格，你希望筛选出价格大于 100 的产品。

let products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 150 },
  { name: 'Charger', price: 20 }
];
let expensiveProducts = products.filter(function(product) {
  return product.price > 100;  // 筛选出价格大于 100 的产品
});
console.log(expensiveProducts);

输出：

[
{ name: 'Laptop', price: 1200 },
{ name: 'Phone', price: 800 },
{ name: 'Tablet', price: 150 }
]

示例 2：过滤用户数据

假设你有一个用户列表，包含姓名、年龄等信息，你希望筛选出年龄大于 18 的用户。

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 30 },
  { name: 'David', age: 15 }
];
let adults = users.filter(function(user) {
  return user.age > 18;  // 筛选出年龄大于 18 的用户
});
console.log(adults);

输出：

[
{ name: 'Alice', age: 25 },
{ name: 'Charlie', age: 30 }
]

示例 3：筛选异步操作中的数据

在处理异步操作时，可以使用 filter() 结合 Promise 来筛选异步操作结果。例如，假设你需要筛选出满足某些条件的 API 数据。

let ids = [1, 2, 3, 4, 5];
let promises = ids.map(function(id) {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(response => response.json());
});
Promise.all(promises).then(function(posts) {
  let filteredPosts = posts.filter(function(post) {
    return post.userId === 1;  // 只保留 userId 为 1 的帖子
  });
  console.log(filteredPosts);
});

5. 总结与最佳实践

filter() 是一个非常强大的数组遍历方法，能够根据指定的条件筛选数组中的元素，并返回一个新数组。它常用于从大数据集中提取符合特定条件的子集。

使用 filter() 时，应该遵循以下最佳实践：

确保回调函数中返回的是 true 或 false，以决定元素是否保留。
利用 filter() 可以避免手动处理循环条件，保持代码简洁。
在处理异步数据时，可以与 Promise 配合使用，灵活地过滤数据。

掌握 filter() 方法将帮助你在实际项目中高效地处理和筛选数据。

到此这篇关于JS中如何使用 filter() 方法过滤数组元素的文章就介绍到这了,更多相关js filter() 方法过滤数组元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js
filter()

JS简单实现表格排序功能示例
这篇文章主要介绍了JS简单实现表格排序功能,涉及javascript针对页面元素的遍历、判断与排序相关操作技巧,需要的朋友可以参考下
2016-12-12
Echarts实现单条折线可拖拽效果
这篇文章主要为大家详细介绍了Echarts实现单条折线可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
用js编写简单的贪吃蛇小游戏
这篇文章主要为大家详细介绍了用js编写简单的贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
深入理解JavaScript中为什么string可以拥有方法
下面小编就为大家带来一篇深入理解JavaScript中为什么string可以拥有方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
微信小程序自定义组件和通信的方法
开发中常见的组件主要分为公共组件和页面组件两种,因此注册组件的方式也分为两种全局注册和局部注册,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-06-06
javascript中 try catch用法
JS try catch语句一般在什么情况下使用？是必须使用的吗？下面就让小编来给大家介绍一下试用心得。
2015-08-08
javascript中callee与caller的区别分析
有些小伙伴可能会问caller,callee 是什么？在javascript 中有什么样的作用？那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。
2015-04-04
浅谈webpack 构建性能优化策略小结
webpack以其丰富的功能和灵活的配置而深受业内吹捧，逐步取代了grunt和gulp成为大多数前端工程实践中的首选，这篇文章主要介绍了浅谈webpack 构建性能优化策略小结，感兴趣的小伙伴们可以参考一下
2018-06-06
javascript函数特点实例分析
这篇文章主要介绍了javascript函数特点,实例分析了javascript函数传递参数及调用方法,需要的朋友可以参考下
2015-05-05
使用JS获取页面上的所有标签
这篇文章主要介绍了使用JS获取页面上的所有标签 ,需要的朋友可以参考下
2018-10-10