【譯】以申請大學流程來解釋 JavaScript 的 filter 方法
出版:2018-09-17
如果你熟悉申請大學流程的話,你也可以理解 JavaScript 的 filter 方法。相對於 JavaScript 裡面的 map() 和 reduce() 方法來說,filter() 方法也許是最一目了然的方法。
相對於 JavaScript 裡面的 map() 和 reduce() 方法來說,filter() 方法也許是最一目了然的方法。
你輸入一個數組,以特定方法過濾它們,並返回一個新的數組。
這個看起來很簡單,不過我總是想把它換成 for() 循環。因此,我選擇一種更加好的方法去理解 filter() 是如何運行的。
我發現,filter 方法就類似大學入學審批官。它們用一堆的參數來決定哪些學生可以進入他們特定的學院。是的,我們希望學院都可以更加靈活,全面地考察我們過去的成就,不過在實際情況中,很多硬性數字指標例如 SAT、ACT 和 GPA 績點才是考量的決定因素。
就讓我們一起探討這個流程吧。
好的,我們假設這裡有四個同學,並列出他們的名字和 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() 方法來達到相同效果吧。
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 是首先出現在 statement 裡面!你可能會預期在這個函數的最後去尋找最終的數組。取而代之,我們用返回來表示哪個元素會結束在 admitted。
直至現在,在我們的 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。
Calpa 是一個四天工作的系統架構師,日常幫助客戶構建一站式網站應用,手機應用,雲端架構。
2023 年 9 月,Calpa 收到來自國內外不同 Web3 團隊的邀請,參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份,Calpa 將參加台北區塊鏈週的 Hackathon 比賽。
Calpa 擅長運用各種前沿技術,包括 TypeScript、React.js 和 Vue.js,開發具有 Responsive Web Design 的網站。另外,他透過運用 aws-cdk 和 TypeScript 技術的融合,實現了基於雲端的「基礎即代碼」(Infrastructure as Code)部署策略,建立了多套高效且具有可伸縮性的全端架構。
同時,Calpa 積極參與各個社群,活躍於香港和台灣的開源社區,分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者,為聽眾提供寶貴的工作經驗和深刻見解。此外,Calpa 在 GitHub 上公開分享了個人博客程式碼,已獲得超過 300 顆星星和 60 個分支。
如果您對系統架構有任何問題,或需要進一步交流,請隨時聯絡 Calpa,他非常歡迎討論。