JavaScript Filter函数：小白也能懂的5个示例

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

创建一份JavaScript学习教程，用5个简单示例讲解Array.filter()方法。每个示例包含：1) 实际问题场景描述 2) 示例输入数组 3) 过滤条件说明 4) 完整代码实现 5) 控制台输出结果。示例包括：筛选及格成绩、过滤出偶数、找出长单词等。使用中文注释解释每行代码。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果

今天想和大家分享一下JavaScript中非常实用的filter()方法。作为一个数组操作的核心函数，它能让数据处理变得特别简单。我用5个生活化的例子来演示它的用法，保证零基础也能看懂！

1. 筛选及格成绩

假设我们有一组学生考试成绩，需要找出所有及格（≥60分）的成绩。原始数据是一个包含多个分数的数组。

• 输入数组：[45, 72, 58, 90, 66, 82, 50]
• 过滤条件：分数大于等于60
• 实现思路：用filter遍历数组，对每个分数判断是否满足条件

• 输出结果：[72, 90, 66, 82]

• 过滤出偶数

现在有一组随机数字，需要筛选出其中的偶数。

• 输入数组：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
• 过滤条件：数字能被2整除（即num % 2 === 0）
• 实现思路：使用取模运算判断奇偶性

• 输出结果：[2, 4, 6, 8, 10]

• 找出长单词

从一个单词列表中筛选出长度超过5个字母的单词。

• 输入数组：["apple", "banana", "pear", "orange", "grape"]
• 过滤条件：单词长度大于5
• 实现思路：检查每个单词的length属性

• 输出结果：["banana", "orange"]

• 筛选购物清单

在购物清单中找出价格低于50元的商品。

• 输入数组：[{name:"牛奶",price:25}, {name:"面包",price:15}, {name:"牛排",price:80}]
• 过滤条件：商品价格小于50
• 实现思路：访问对象的price属性进行比较

• 输出结果：[{name:"牛奶",price:25}, {name:"面包",price:15}]

• 过滤有效邮箱

从一组邮箱地址中筛选出格式正确的邮箱（简单判断包含@符号）。

• 输入数组：["[e-mail]", "test", "user@mail", "[e-mail]"]
• 过滤条件：字符串包含@符号
• 实现思路：使用includes方法检查字符串
• 输出结果：["[e-mail]", "user@mail", "[e-mail]"]

通过这些例子，我们可以总结出filter()方法的几个特点：

• 它不会改变原数组，而是返回一个新数组
• 回调函数需要返回布尔值，true表示保留该元素
• 非常适合从大量数据中筛选符合条件的子集
• 可以处理各种数据类型，包括对象数组

在实际开发中，filter()经常和其他数组方法如map()、reduce()配合使用，能实现非常强大的数据处理功能。比如可以先过滤出符合条件的数据，再对这些数据进行转换或计算。

学习JavaScript数组操作时，我发现在InsCode(快马)平台上实践特别方便。它的在线编辑器可以直接运行代码看到结果，还能一键部署完整的项目。对于新手来说，不用配置本地环境就能练习各种JavaScript特性，真的很省心。我经常用它来测试一些小例子，即时反馈让学习效率提高不少。

希望这些例子能帮你快速掌握filter()方法。记住，编程最好的学习方式就是多练习，试着用filter()解决你遇到的实际问题吧！

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

创建一份JavaScript学习教程，用5个简单示例讲解Array.filter()方法。每个示例包含：1) 实际问题场景描述 2) 示例输入数组 3) 过滤条件说明 4) 完整代码实现 5) 控制台输出结果。示例包括：筛选及格成绩、过滤出偶数、找出长单词等。使用中文注释解释每行代码。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果