JavaScript filter()

從方法的名稱大致可以猜測到它的作用是用來篩選陣列元素。

事實如此，filter使用回撥函式對陣列元素進行篩選，並將符合條件的元素存入一個新陣列。

更多內容可以參閱JavaScript Array 陣列一章節。

ES5新增此方法。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
array.filter(callbackfn[, thisArg])

引數解析：

（1）.callbackfn：必需，回撥函式，此函式會針對陣列的每一個元素執行一次。           

          如果回撥函式的返回值為true（或者可以轉換為true），那麼就將元素組中對應的元素存入新陣列。

          回撥函式可以有三個引數：

            第一個引數是當前陣列元素值。

            第二個引數是當前陣列元素的索引。

            第三個引數就是陣列物件本身。

（2）.thisArg：可選，規定回撥函式中this所指向的物件，省略，this指向window物件。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.opera瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let checkElement=function(value){
  if(value%2==0){
    return true;
  }
}
let array=[1,2,3,4,5,6];
console.log(array.filter(checkElement));

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.上述程式碼可以篩選出元素組中的偶數，並返回存放偶數的新陣列。

（2）.當陣列元素為偶數的時候，回撥函式返回true，那麼就會將當前陣列元素寫入新陣列。

特別說明：返回值不一定分的是true本身，只要能夠轉換為true即可，程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let checkElement=function(value){
  if(value%2==0){
    return "螞蟻部落";
  }
}
let array=[1,2,3,4,5,6];
console.log(array.filter(checkElement));

程式碼執行效果截圖如下：

將回撥函式的返回值由true改為"螞蟻部落"依然功能正常。

只要返回值可以轉換為true就可以，無論是隱式轉換還是顯式轉換。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={
  min:3,
  max:5
}
let checkElement=function(value,obj){
  if(value>=this.min&&value<=this.max){
    return true;
  }
}

let array=[1,2,3,4,5,6];
console.log(array.filter(checkElement,obj));

程式碼執行效果截圖如下：

上面的程式碼可以獲取一個元素大於等於3小於等於5的新陣列。

為回撥函式傳遞了第二個引數，它用來規定回撥函式this所指向的物件。

預設this指向window物件，傳遞第二個引數之後，this指向obj物件。