JavaScript 之常忽略數組方法filter()

在開發過程中我們常常遇到，需要過濾數據的情況。好比我們從接口獲取到的數據，不同的模塊可能所需要的具體內容不同，又或者有4個tab，當我們點擊其中一個對應的標題時，隱藏另外3個，這時我們很自然的想到的是根據不同的篩選條件重新請求接口，但是這樣往往是耗費性能的。

針對上邊的問題，我們可以一次請求一個比較大的數據集，當我們具體顯示頁面中的某一部分時再進行篩選。在這裏我將介紹，js數組操作filter()

 filter()接受三個參數，返回的是數組，數組內是所有滿足條件的元素。如果不滿足條件，filter()返回的是一個空數組。

filter()可以做什麼？

1 創建一個數組，判斷數組中是否存在某個值

var newarr = [
  { num: 1, val: 'ceshi', flag: 'aa' },
  { num: 2, val: 'ceshi2', flag: 'aa2'  }
]
console.log(newarr.filter(item => item.num===2 ))

2.去掉空數組空字符串、undefined、null

var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)

var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)

>//空字符串裏面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)

3.去掉數組中不符合項

var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40)  
console.log(newArr)

4.數組去重

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)  
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]