快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一份JavaScript学习教程，用5个简单示例讲解Array.filter()方法。每个示例包含：1) 实际问题场景描述 2) 示例输入数组 3) 过滤条件说明 4) 完整代码实现 5) 控制台输出结果。示例包括：筛选及格成绩、过滤出偶数、找出长单词等。使用中文注释解释每行代码。- 点击'项目生成'按钮，等待项目生成完整后预览效果
今天想和大家分享一下JavaScript中非常实用的filter()方法。作为一个数组操作的核心函数，它能让数据处理变得特别简单。我用5个生活化的例子来演示它的用法，保证零基础也能看懂！
- 筛选及格成绩
假设我们有一组学生考试成绩，需要找出所有及格（≥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}]
过滤有效邮箱
从一组邮箱地址中筛选出格式正确的邮箱（简单判断包含@符号）。
- 输入数组：["abc@123.com", "test", "user@mail", "admin@site.org"]
- 过滤条件：字符串包含@符号
- 实现思路：使用includes方法检查字符串
- 输出结果：["abc@123.com", "user@mail", "admin@site.org"]
通过这些例子，我们可以总结出filter()方法的几个特点：
- 它不会改变原数组，而是返回一个新数组
- 回调函数需要返回布尔值，true表示保留该元素
- 非常适合从大量数据中筛选符合条件的子集
- 可以处理各种数据类型，包括对象数组
在实际开发中，filter()经常和其他数组方法如map()、reduce()配合使用，能实现非常强大的数据处理功能。比如可以先过滤出符合条件的数据，再对这些数据进行转换或计算。
学习JavaScript数组操作时，我发现在InsCode(快马)平台上实践特别方便。它的在线编辑器可以直接运行代码看到结果，还能一键部署完整的项目。对于新手来说，不用配置本地环境就能练习各种JavaScript特性，真的很省心。我经常用它来测试一些小例子，即时反馈让学习效率提高不少。
希望这些例子能帮你快速掌握filter()方法。记住，编程最好的学习方式就是多练习，试着用filter()解决你遇到的实际问题吧！
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一份JavaScript学习教程，用5个简单示例讲解Array.filter()方法。每个示例包含：1) 实际问题场景描述 2) 示例输入数组 3) 过滤条件说明 4) 完整代码实现 5) 控制台输出结果。示例包括：筛选及格成绩、过滤出偶数、找出长单词等。使用中文注释解释每行代码。- 点击'项目生成'按钮，等待项目生成完整后预览效果
