数组filter()参数详解，巧用filter()数组去重

风晓 2024-01-01 07:41:13  68551 赞同 0 反对 0

分类：资源

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

PS：filter接收2个参数，第一个参数为callback，第二个参数是callback运行时的this指向，而本文讲的三个参数是callback的三个参数。

arr.filter(callback(ele,index,arr),this)

第一位形参

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代表数组本身。

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

数组filter()参数详解，巧用filter()数组去重

相关资源

关注我们