Javascript Array filter method 的使用心得與範例

作者：瑞課 - 5月 17, 2020

這是一篇介紹 Array filter method 的實作心得，說明我自己理解 filter() 方法的過程。我不是程式高手，以下的文章只是用以提高 filter() 方法的理解度，讓我自己更容易將 filter() 活用於平常資料過濾的應用。

依據 W3School 的 Javascript 的教學， Array filter() 方法的定義為使用方法為：

The filter() method creates an array filled with all array elements that pass a test (provided as a function).
filter() 的方法會創造一矩陣，矩陣為通過測試的元素

但是，我覺得 filter() 更好的說明應該如下：

filter () 方法會依據傳回 true 值，決定最後的新矩陣元素。判斷的準則是
return true，就會保留這一個元素，將元素加入新矩陣，類似 array.push
return false 或 不傳回值，就不要這一個元素

即使，W3School 有提供範例，透過 W3School 提供的範例，難以活用 filter() 並發擇它應有的作用。

var ages = [32, 33, 16, 40];
function checkAdult(age) {
  return age >= 18;
}
console.log(age.filter(checkAdulte)) 
//輸出為 [32, 33, 40]

上面提供了一個示例，但是真正在處理資料的時候，資料形式往往不會這麼簡單。舉個例子來說，

const students=[
	{Degree:4,gender:"男",height:"140"},
	{Degree:9,gender:"女",height:"163"},
	{Degree:11,gender:"女",height:"163"},
	{Degree:11,gender:"男",height:"173"},
	{Degree:5,gender:"女",height:"145"},
	{Degree:7,gender:"男",height:"155"},
	{Degree:5,gender:"女",height:"150"},
	{Degree:3,gender:"男",height:"130"},
	{Degree:10,gender:"男",height:"170"},
	{Degree:11,gender:"男",height:"177"}]

問題：如何透過 filter()，找出國中以上、女生的資料呢？

為了解決上面的問題，我們有必要增加對於 array filter() 方法的理解。經過實作後，我對於 filter 的理解為

filter () 方法會依據傳回 true 值，決定最後的新矩陣元素。判斷的準則是

return true，就會保留這一個元素，將元素加入新矩陣，類似 array.push
return false 或 不傳回值，就不要這一個元素

若是依據上述的描述，我們就可以透過傳回的 true, false 來決定新的矩陣，

const result=students.filter(function(item){
   if(item.Degree<7) return false;
   if(item.gender=="女") return true;
});
console.log(result)
// 輸出為 
//[{ Degree: 9, gender: '女', height: '163' },
// { Degree: 11, gender: '女', height: '163' }]

原來，filter() 方法，是可以處理 JSON 資料。我不再需要透過 forEach 和 array.push( ) 來實現。

const result1=[]
students.forEach(function(item){
    if(item.Degree<7) return;
    if(item.gender=="女") result1.push(item);
})

console.log(result1)
// 輸出為 
//[{ Degree: 9, gender: '女', height: '163' },
// { Degree: 11, gender: '女', height: '163' }]