我想說的是
filter 會建立一個經過指定運算判斷後回傳為真的新陣列，就是這麼簡單

關於 filter 在其他地方我好像已經遇到好幾遍，一直沒有有系統地把它記下來
就剛好在這篇文章做一個紀錄

其實之前就一直有個疑問，這個可以用 foreach 做掉，為什麼一定非要用 filter 不可？
一直到截止我還沒沒找到答案，如果有人剛好看到又剛好知道答案，麻煩請留言告訴我

跟著官方文件來看看 filter 的神奇之處

filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

翻成中文就是 filter() 方法會建立一個經過指定運算判斷後回傳為真的新陣列

語法是

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

來看範例

底下範例中，定義一個陣列 word 把內容拿去 filter，條件是長度大於 6
回傳值組成新的陣列 longWords，這就是基本的操作
和之前的 map 一樣，是不會改變原始陣列的內容
然後...沒錯又是之前講過的箭頭函數

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

let longWords = words.filter(word => word.length > 6);

// Filtered array longWords is ["exuberant", "destruction", "present"]

也可以把 callback 寫成獨立的 function
例如這個移除所有小於 10 的範例
這時候又可以比較一下箭頭函數和聲明函數的差別

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

如果不拆開，把 function 直接寫在 filter 裡面其實也是可以的
在範例中，每次的傳入值就叫做 el 然後用 el 做判斷，要注意的是這邊需要用 return
因為他其實就是在 filter 內做匿名函數

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

再來是一個比較實用的用法，畢竟你不會永遠都有這麼簡單的陣列
萬一今天傳進來的是一個 json 呢？
比如說去接了別人的 API 取資料，要把無效資料去除才能顯示在頁面上

那就是以下的範例了
拿到一堆數據資料，要刪除無效的非數值資料

建立一個把非零 numeric id 的元素都過濾掉的的 JSON

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

var invalidEntries = 0;

function isNumber(obj) {
  return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id)) {
    return true;
  } 
  invalidEntries++;
  return false; 
}

var arrByID = arr.filter(filterByID);

console.log('過濾好的陣列\n', arrByID); 
// 過濾好的陣列
// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]

console.log('無效的元素數量 = ', invalidEntries); 
// 無效的元素數量 = 4

原來就是三種 callback 的表現方法，也沒這麼難嘛
下次再遇到，我就會了！