博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
数组filter()参数详解,巧用filter()数组去重
阅读量:5242 次
发布时间:2019-06-14

本文共 1163 字,大约阅读时间需要 3 分钟。

 

数组方法挺多,但是用来用去可能也就foreach,splice以及slice接触较多,filter()说实话之前也没过多了解。其实filter()为数组提供过滤功能,它会遍历数组所有元素,并且返回满足条件的元素,如下:

第一位形参

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];var arr2 = arr.filter(function(x) {return x >= 8;}); console.log(arr2); //[8, 9, 10]

上述代码所做的事情,就是将arr中每个元素一次传入函数与8进行比较,得出8,9,10。第一个形参X就代表了数组中的元素。

第二位形参

让我们再来看看如下代码:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];var arr2 = arr.filter(function(x, index) {return index % 3 === 0 || x >= 8;}); console.log(arr2); //[1, 4, 7, 8, 9, 10]

index代表数组索引,它的循环过程是这样的,首先传入元素1,它的索引为0,而0%3===0,满足了条件。

第二遍传入了2,索引为1,但1%3!==0,且1比8小,所以被排除,依次循环,得出我们arr2的输出结果。

第三位形参

我们再来看一段代码,结合filter进行数组去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];var arr2 = arr.filter(function(x, index,self) {return self.indexOf(x)===index;}); console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

这是怎么实现的呢,filter的第三参数self代表函数本身,而indexOf始终返回第一次找到匹配该元素的索引,我们来走走遍历过程。

第一次循环,传入元素1,index(1)的索引为0,而此时1的索引本来就是0,OK,满足。

第二次循环,传入元素2,index(2)的索引为1,而此时2的索引也是1,OK,也满足。

第三次循环,传入元素2,index(2)的索引为1,而此时2的索引为2,OK,不满足,被PASS,这里就是巧妙的借用了indexOf始终查找到第一次出现的位置。

总结

filter(x,index,self)可以为数组提供过滤功能,其中x代表元素,index是与X一同传入元素的索引,而self代表数组本身。

就这么多吧。

转载于:https://www.cnblogs.com/shouyeren/p/9012723.html

你可能感兴趣的文章
无锁编程笔记
查看>>
jquery mobile
查看>>
如何在vue单页应用中使用百度地图
查看>>
Springboot使用步骤
查看>>
Spring属性注入
查看>>
Springboot-配置文件
查看>>
Springboot-日志框架
查看>>
P1192-台阶问题
查看>>
一、使用pip安装Python包
查看>>
spring与quartz整合
查看>>
Kattis之旅——Eight Queens
查看>>
3.PHP 教程_PHP 语法
查看>>
Duilib扩展《01》— 双击、右键消息扩展
查看>>
利用Fiddler拦截接口请求并篡改数据
查看>>
python习题:unittest参数化-数据从文件或excel中读取
查看>>
在工程中要加入新的错误弹出方法
查看>>
PS 滤镜— — sparkle 效果
查看>>
snmpwalk命令常用方法总结
查看>>
网站产品设计
查看>>
代理ARP
查看>>