filter是根据过滤条件对整个数组进行过滤,符合的为true保留,不符合的为false删除。
核心代码如下:
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});;
arr.filter里三个参数的含义:
element:当前的元素
index:当前元素的位置
self:整个数组
self.indexOf(element):当前元素在数组中第一次出现的位置
过滤条件: 当前元素在数组中第一次出现的位置当他与当前元素的位置相同时就保留,如果不同证明它不是第一次在数组中出现,就删除。
通过下面这个例子直观的看一下:
var r=[];
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
console.log(element);
console.log(index);
//console.log(self);
console.log(self.indexOf(element));
return self.indexOf(element) === index;
});
console.log(r);
这样能更清楚的理解它的整个过程;
//Es6中去重的方法
var arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
var arr2=[...new Set(arr)];
console.log(arr2);
当然去重的方法很多,如果你单纯的想去重的话可以看一下其他大佬的文章~
---------分割线--------------------------------------------------------------------------
2020.7.22更新:
时隔一年多偶然回头翻看自己之前的文章,感觉好像是和之前的那个还在上学时青涩的自己进行了一番对话,可能这将会是我记录成长最大的动力了吧。今天正好再看到filter顺手更新一下:
使用filter取两个数组对象的交集
const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name5', id: 5 }];
const arr2 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }];
const result = arr2.filter(function (v) {
return arr1.some(n => JSON.stringify(n) === JSON.stringify(v))
})
console.log(result); // [{ name: 'name1', id: 1 },{ name: 'name2', id: 2 },{ name: 'name3', id: 3 },{ name: 'name5', id: 5 }]
说明:.some(callback(ele,index,self),thisArg) 方法:返回一个boolean,测试数组中是不是至少有一个元素满足回调函数的测试。
通过some() 会把arr1中的每个元素和arr2中传进来的每一个元素进行比较,返回为true,.filter()会将元素保留,从而得出两个数组对象的交集。