js数组高阶函数——filter()方法

在这里插入图片描述

😊博主:小猫娃来啦
😊文章核心:js数组高阶函数——filter方法

filter()方法

⭐一般来说,filter() 方法用于过滤数组中的元素,并返回一个新数组。
语法:

array.filter(function(value, index, arr), thisValue)

参数说明:

  • function:函数,规定了过滤条件。必需。该函数接受三个参数:当前元素的值、当前元素的索引和包含该元素的数组。
  • thisValue:可选项。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略thisValue,则默认是全局对象(浏览器环境下是 window 对象)。

返回值:
返回一个新数组,其中包含符合条件的元素。以下会举5个例子,看懂例子,基本就掌握了。

-------------------------------------------------------------⭐------------------------------------------------------------------

5个例子说明一切

⭐⭐⭐例1

假设我们有一个数字数组,现在想要过滤出其中所有大于等于5的数字:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
let result = numbers.filter(function(num) {
    return num >= 5;
});
console.log(result);   // 输出:[5, 6, 7, 8]

上述代码中使用匿名函数定义了过滤条件,并将其作为第一个参数传递给 filter() 方法。最终结果保存在变量 result 中,并输出到控制台中。
-------------------------------------------------------------⭐------------------------------------------------------------------

⭐⭐⭐例2

				let arr = [{
					id: 1,
					name: '神墓'
				}, {
					id: 2,
					name: '完美世界'
				}, {
					id: 1,
					name: '长生界'
				}, {
					id: 7,
					name: '遮天'
				}, {
					id: 1,
					name: '不死不灭'
				}]
				console.log(arr.filter(item => item.id == 1));
				

打印结果:
在这里插入图片描述

上面这个例子,我们将数组中每一项id为1的筛选出来。后端有SQL语句可以查询,前端也可以通过这样的方式来实现查询,筛选。

也有别的写法,数组不变:

			let fe = arr.filter((item)=function (){
				return (item.id ==1 )
			})
			console.log(fe);

这样写,和上面打印的结果一模一样。
-------------------------------------------------------------⭐------------------------------------------------------------------

⭐⭐⭐例3

			const words = ['赏', '花', '赏', '月', '赏', '秋','香'];
			const result = words.filter(word => word != '赏');
			console.log(result);

在这里插入图片描述上面例子中,我们挑出了数组words中不是赏字的所有字

-------------------------------------------------------------⭐------------------------------------------------------------------

⭐⭐⭐例4

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);

在这里插入图片描述上面的例子中,我们筛选words数组中的每一项元素的长度大于6的元素,因为每一个元素都是个单词,是个字符串,字符串也有长度,所以这样也可以过滤出我们想要的。

-------------------------------------------------------------⭐------------------------------------------------------------------

⭐⭐⭐例5

			function isBigEnoughcount(value) {
				return value >= 10;
			}
			const filtered = [12, 5, 8, 130, 44].filter(isBigEnoughcount);
			console.log(filtered);

在这里插入图片描述
这个例子中,声明一个数组,并过滤,执行的逻辑是一个条件。条件为值大于等于10,也就是说,我们声明了一个数组,并且筛选了数组中每一项大于10的数字。


filter()使用场景总结

  • 过滤数组
    最常见的用法是根据指定的条件从数组中筛选出符合要求的元素,形成一个新的子数组。例如,从一个学生成绩数组中筛选出所有及格(大于等于60分)的成绩。

  • 删除数组中的特定元素
    可以利用 filter() 方法来删除数组中满足某个条件的元素。例如,从一个商品列表中删除库存为零的商品。

  • 去重数组
    如果数组中存在重复的元素,可以使用 filter() 方法去除重复项,生成一个不包含重复元素的新数组。

  • 根据条件获取对象数组
    当操作对象数组时,可以使用 filter() 方法根据对象属性的特定条件筛选出所需的对象。例如,在一个用户列表中,筛选出所有年龄大于等于18岁、性别为女性的用户。

  • 条件筛选和转换元素
    通过 filter() 方法结合其他方法,如 map(),可以实现对数组元素进行条件筛选和转换。例如,从一个用户评论列表中筛选出所有评分大于等于4星的评论,并提取出评论内容构成一个新数组。

  • 动态过滤
    可以根据用户的输入或其他条件动态地使用 filter() 方法对数组进行过滤,实现实时搜索或动态筛选的功能。

使用filter()的注意事项

第一:回调函数
       filter() 方法接受一个回调函数作为参数,用于对数组元素进行判断并返回布尔值。在编写回调函数时,要确保它返回 true 或 false,以指示是否选择该元素。否则,filter() 方法将无法正常工作。

第二:原数组不变
       filter() 方法不会修改原始数组,而是返回一个新的筛选后的数组。因此,在使用该方法后,应该使用新的数组来存储结果,或者将结果直接赋给变量,而不是期望原数组被修改。

第三点;处理空数组
       如果原始数组为空(即没有任何元素),那么经过过滤后的结果也将是一个空数组。因此,在使用 filter() 方法之前,最好先检查数组是否为空,以避免不必要的操作。

第四点:隐式类型转换
       使用 filter() 方法时,要注意 JavaScript 的隐式类型转换规则。回调函数中的条件表达式可能导致意外的结果,例如字符串和数字之间的比较。确保在进行条件判断时,类型一致性与预期一致。

我们可以这样用:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

const emptyArray = [];
const filteredArray = emptyArray.filter(item => item > 0);
console.log(filteredArray); // 输出: []

const mixedArray = [1, '2', 3, '4', 5];
const filteredMixedArray = mixedArray.filter(item => typeof item === 'number');
console.log(filteredMixedArray); // 输出: [1, 3, 5]

在这里插入图片描述


  • 28
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
JSfilter方法数组的一个内置方法,用于在数组中过滤出符合指定条件的元素并返回一个新数组。该方法接受一个回调函数作为参数,回调函数可以接受当前元素、索引和原始数组作为参数。在回调函数中,我们可以定义过滤的条件,并返回true或false来确定是否保留该元素。 回调函数的语法如下: ``` function callback(element[, index[, array]]) { // 返回true或false,确定是否保留该元素 } ``` 使用filter方法的语法如下: ``` array.filter(callback(element[, index[, array]])[, thisArg]) ``` 其中,`array`是要进行过滤操作的数组,`callback`是回调函数,`thisArg`是可选参数,用于指定回调函数中的this值。 通过使用filter方法,我们可以避免手动循环遍历数组,并且无需提前创建一个新数组来存储过滤后的元素。这大大简化了代码的编写,并提高了代码的可读性。 引用<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JSfilter的用法](https://blog.csdn.net/qq_35859392/article/details/98146441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [JavaScript 数组filter方法完整介绍](https://blog.csdn.net/allway2/article/details/124954994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猫娃来啦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值