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