[譯] 以申請大學流程來解釋 JavaScript 的 filter 方法

• 原文地址：JavaScript’s Filter Function Explained By Applying To College
• 原文做者：Kevin Kononenko
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者： Calpa
• 校對者：linxuesia, rydensun

若是你熟悉申請大學流程的話，你也能夠理解 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() 方法來達到相同效果吧。

1. Filter 是一個數組方法，因此咱們會從學生數組開始。
2. 對於每個數組裏面的元素，它會調用一個回調（callback）方法。
3. 它用 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
  }
];*/
複製代碼

輸入和輸出都是同樣的，這裏是咱們作法不同的地方：

1. 咱們不須要定義一個 admitted 數組，而後填充它。咱們能夠在同一個代碼塊裏面同時定義，並填充它的元素。
2. 咱們其實是在 return 語句中使用了一個條件判斷式！這表明咱們只須要返回那些符合條件的元素。
3. 咱們如今能夠用 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、前端、後端、區塊鏈、產品、設計、人工智能 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。