Js高階函數使用之filter()、map()和reduce()

最近本小白在搬磚（敲代碼）時，常常碰到須要對數據進行二次處理的場景。由於剛接觸前端不久，經驗不足，碰到這種場景，第一想法就是本身定義一個函數，裏面作一大堆的循環、判斷，致使代碼可讀性差、冗餘，以及浪費不必的時間。因此提醒各位像做者這樣剛接觸前端的小白們，想要學好js，必定要掌握js爲咱們提供的各類函數。在這小白爲你們介紹三個js經常使用的高階函數fileter()、map()和reduce()。

話很少說，直接上代碼：

const numbers=[12,54,77,120,20,302] //定義一個數組，裏面有一些無序的數字
//接下來相對這個數組的數據進行一些操做
//好比說獲取該數組中大於60的數字，並對其乘以2，而後求他們的總和
//啥也不會的我一開始是這樣作的
   const moreThan60 = (arr) => {
     let newNums = []
     let total = 0
     let j = 0
     for (let i in arr) {
       if (arr[i] > 60) {
         newNums[j] = arr[i] * 2
         total = total + newNums[j]
         j++
       }
     }
     return total
   }//定義一個函數來實現

   console.log(moreThan60(numbers)) //998
複製代碼

雖然這樣能解決問題，看起來也不難，可是若是問題再複雜一點，運用到實際上，咱們就不得不在函數內部定義一堆變量、作一堆循環、寫一堆代碼等，這就會致使我開頭說的問題。這時候這幾個高階函數就能派上用場啦。

1.filter()

• 功能：顧名思義，filter 就是過濾器的意思。它用於把 Array 的某些元素過濾掉，而後返回剩下的元素。
• 參數：接收一個函數做爲其參數。
• 特色：數組方法，傳入的函數必須返回 boolean 值。它能把傳入的函數依次做用於每一個元素，而後根據返回值是 true 仍是 false 決定保留仍是丟棄該元素。
• 用法：以上面的問題爲例。上訴問題提到需獲取數組中大於60的數字，那不就正好可使 filter() 嘛，只須要將大於60設定爲過濾條件便可。代碼以下：

let newNums1 = numbers.filter(n => n > 60)

console.log(newNums1)//[77,120,302]
複製代碼

2.map()

• 功能：map 有 映射 的意思，也就是這個函數的功能。它用於將 Array 中的全部元素進行一致的改變。
• 參數：接收一個函數做爲其參數。
• 特色：數組方法。它能把傳入的函數依次做用於每一個元素，並把結果生成一個新的 Array。
• 用法：上述問題提到需將新數組乘以2，那使用 map() 再合適不過了。代碼以下：

let newNums2 = newNums1.map(n => n * 2)

console.log(newNums2)//[154,240,604]
複製代碼

3.reduce()

• 功能：它用於把一個函數做用在這個 Array 的每個元素上，而後把結果繼續和序列的下一個元素作累積計算。
• 參數：接受一個函數做爲其參數，該函數要求有兩個參數，第一個參數用於保存當前累積計算的值，第二個參數則是當前的數組元素。
• 特色：數組方法。它可用於對數組的全部元素進行彙總。
• 用法：咱們須要求上述問題所獲得數組的總和，便可使用 reduce（）。代碼以下：

let total = newNums2.reduce((value,n) => value + n)

console.log(total)//998
複製代碼

當咱們能靈活運用這三個高階函數時，上述問題也就變的十分簡單，只需一行代碼便可解決。代碼以下：

let total = numbers.filter(n => n > 60).map(n => n * 2).reduce((value,n) => value + n)
console.log(total)//998
複製代碼

這樣不只方便許多，邏輯也十分清楚，代碼既簡潔又明瞭，這就是js函數的偉大之處。

對於 filter() 的補充

filter() 接收的回調函數，其實能夠有多個參數。一般咱們僅使用第一個參數，表示 Array 的某個元素。回調函數還能夠接收另外兩個參數，分別表示元素的位置和數組自己：

const arr = ['a','b','c']
arr.filter((element,index,arrSelf) => {
 console.log(element)//依次打印a b c 
 console.log(index)//依次打印0 1 2
 console.log(arrSelf)//依次打印['a','b','c']
 return true //返回一個布爾值
})
複製代碼

這樣咱們就能夠利用 filter() 巧妙實現數組去重：

const arr = [1,2,3,1,4,6,2,4,1]
let newArr = arr.filter((el, index, self) => {
  return self.indexOf(el) === index
   })
   console.log(newArr)//[1,2,3,4,6]
複製代碼

以上就是文章的所有內容啦，初入前端，還請各位大佬多多指教！