數組filter()參數詳解，巧用filter()數組去重

 

 

數組方法挺多，可是用來用去可能也就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表明數組自己。

就這麼多吧。