[譯] 以申請大學流程來解釋 JavaScript 的 filter 方法
相對於 JavaScript 裡面的 map() 和 reduce() 方法來說，filter() 方法也許是最一目瞭然的方法。
你輸入一個數組，以特定方法過濾它們，並返回一個新的陣列。
這個看起來很簡單，不過我總是想把它換成 for() 迴圈。因此，我選擇一種更加好的方法去理解 filter() 是如何執行的。
我發現，filter 方法就類似大學入學審批官。它們用一堆的引數來決定哪些學生可以進入他們特定的學院。是的，我們希望學院都可以更加靈活，全面地考察我們過去的成就，不過在實際情況中，很多硬性數字指標例如 SAT、ACT 和 GPA 績點才是考量的決定因素。
就讓我們一起探討這個流程吧。
使用 For 迴圈而不是 Filter 函式
好的，我們假設這裡有四個同學，並列出他們的名字和 GPA。有一個學院只想要擁有 3.2 GPA 以上的學生進入學院。下面是你可能的做法。
let students = [
{
name: "david",
GPA: 3.3
},
{
name: "sheila",
GPA: 3.1
},
{
name: "Alonzo",
GPA: 3.65
},
{
name: "Mary",
GPA: 3.8
}
]
let admitted =[];
for (let i=0; i < students.length; i++){
if(students[i].gpa > 3.2)
admitted.push(students[i]);
}
/*admitted = [
{
name: "david",
GPA: 3.3
},
{
name: "Alonzo",
GPA: 3.65
},
{
name: "Mary",
GPA: 3.8
}
];*/
複製程式碼
哇！這個是一個過於複雜的例子。如果有人閱讀你的程式碼，他們可能需要追蹤多個數組，才意識到你的一個簡單過濾陣列方法。同時，你需要仔細地追蹤 i 來避免發生錯誤。就讓我們學習如何利用 filter 方法來達到相同效果吧。
使用 Filter() 方法
就讓我們使用 filter() 方法來達到相同效果吧。
- Filter 是一個數組方法，所以我們會從學生陣列開始。
- 對於每一個數組裡面的元素，它會呼叫一個回撥（callback）方法。
- 它用 return 來宣告哪些元素會出現在最終的數組裡面，也就是被錄取的學生。
let students = [
{
name: "david",
GPA: 3.3
},
{
name: "sheila",
GPA: 3.1
},
{
name: "Alonzo",
GPA: 3.65
},
{
name: "Mary",
GPA: 3.8
}
]
let admitted = students.filter(function(student){
return student.gpa > 3.2;
})
/*admitted = [
{
name: "david",
GPA: 3.3
},
{
name: "Alonzo",
GPA: 3.65
},
{
name: "Mary",
GPA: 3.8
}
];*/
複製程式碼
輸入和輸出都是一樣的，這裡是我們做法不一樣的地方：
- 我們不需要定義一個 admitted 陣列，然後填充它。我們可以在同一個程式碼塊裡面同時定義，並填充它的元素。
- 我們實際上是在 return 語句中使用了一個條件判斷式！這代表我們只需要返回那些符合條件的元素。
- 我們現在可以用 student 而不是在 for 迴圈裡面的 student[i] 來迴圈每個數組裡面的元素，
你可能注意到一件事，與直覺相反 — 我們只會在最後一步獲得錄取資格，不過在我們的程式碼裡面，變數 admitted 是首先出現在 statement 裡面！你可能會預期在這個函式的最後去尋找最終的陣列。取而代之，我們用返回來表示哪個元素會結束在 admitted 。
例子 2 — 在 Filter 裡面用兩個條件判斷式
直至現在，在我們的 filter 方法內，我們只用了一個條件判斷式。不過這並不代表全部的大學入學流程！通常，入學審查官會觀察超過 10 個因素。
讓我們看一下這兩個因素 — GPA 和 SAT 分數。學生必須擁有 GPA 績點超過 3.2 及 SAT 分數超過 1900。下面是函式應該出現的樣子。
let students = [
{
name: "david",
GPA: 3.3,
SAT: 2000
},
{
name: "sheila",
GPA: 3.1,
SAT: 1600
},
{
name: "Alonzo",
GPA: 3.65,
SAT: 1700
},
{
name: "Mary",
GPA: 3.8,
SAT: 2100
}
]
let admitted = students.filter(function(student){
return student.gpa > 3.2 && student.SAT > 1900;
})
/*admitted = [
{
name: "david",
GPA: 3.3,
SAT: 2000
},
{
name: "Mary",
GPA: 3.8,
SAT: 2100
}
];*/
複製程式碼
看起來很像，對吧？現在我們有兩個條件判斷式在 return statement 裡面。讓我們把這段程式碼再拆分一下。
let admitted = students.filter(function(student){
let goodStudent = student.gpa > 3.2 && student.SAT > 1900
return goodStudent;
})
複製程式碼
啊！所以與 for 迴圈相比的話，這裡就是另外一個重要的差異處。如果你觀察一下 goodStudent 變數的話，就會發現它只會得出 true 或者是 false 值，然後，這個布林值被賦值給返回語句。
所以， true 或者 false 真的決定了，原始數組裡面每個的元素是包含還是排除，然後放到結果的陣列， admitted 。
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為掘金 上的英文分享文章。內容覆蓋 Android 、 iOS 、 前端 、 後端 、 區塊鏈 、 產品 、 設計 、 人工智慧 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃 、官方微博、 知乎專欄 。