1. 程式人生 > >數組filter()參數詳解,巧用filter()數組去重

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

查找 這樣的 一次循環 lte console 得出 func AS body

數組方法挺多,但是用來用去可能也就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代表數組本身。

就這麽多吧。

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