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

數組方法挺多,可是用來用去可能也就foreach,splice以及slice接觸較多,filter()說實話以前也沒過多瞭解。其實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就表明了數組中的元素。spa

第二位形參code

讓咱們再來看看以下代碼:blog

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的輸出結果。io

第三位形參console

咱們再來看一段代碼,結合filter進行數組去重function

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始終返回第一次找到匹配該元素的索引,咱們來走走遍歷過程。class

第一次循環,傳入元素1,index(1)的索引爲0,而此時1的索引原本就是1,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表明數組自己。

就這麼多吧。

相關文章
相關標籤/搜索