點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

最近項目中頻繁用到一些數組的方法，如map，filter等。有時為了處理一些特殊的數據，還得自己封裝一些通用的方法。這些我們其實可以把它歸納成一個"專業"的知識點，那就是JS的函數式編程。另外，我們會發現，在寫JS的過程中，用到數組的地方特別多，無論是JSON返回欄位，還是頁面的列表，都跟數組緊密相關。所以我們今天就用一個數組來體驗函數式編程。

函數總體來說就兩種情況：1、現成的方法，2、自己根據具體需求封裝的方法。

一、數據遍歷-map

假如有這麼一個數組（如下所示），我們需要投影出欄位name和sex。

通常我們會想到用forEach方法，大概的做法是定義一個新數組，然後遍歷原數組，把每個元素的所需鍵值對插入新數組。

為什麼不把它抽象成一個方法？避免中間變數，形式更優雅。

像上面這樣，通過使用map方法，我們把想要的映射效果應用到了數組上。與此同時隱藏了操作細節。

效果圖如下：

二、數據過濾-filter

同樣是上面map的那個例子，我們需要過濾出sex=「男」的信息。通常的做法是for或者選擇更優雅點的forEach方法。基本上也就是兩個步驟：

1、遍歷原數組

2、把通過備件判斷的元素插入新數組

為什麼不把它抽象成一個方法？清晰且代碼少。

對的，就是這麼簡單，且以上map和filter都是現成的方法，拿來即用。

三、數據比較-reduce

假如我們要從這個數組（如下）中，width和height剩面積最大的一組數據。

先來看一下通常的做，使用forEach。這次我把forEach使用的代碼給寫出來了，這樣大家更容易看出對比時的差別。如下所示：

為什麼不把它抽象成一個方法？

這樣一對比，是不是代碼簡潔多了。運行後的結果就是：

{width:3,height:4}

四、數據壓縮-zip

有時候我們需要將兩個數組中的數據合成一個鍵值對存入一個新的數組，比如下面這個數組：

我們需要將arr1的id和arr2的time合成一個新數組。我們先來實現這麼一個合成的函數，如下圖

我們已經把它抽象成了一個方法來調用，所以直接使用：

效果圖如下：

總結：

從上面的幾個例子來看，我們簡略的總結一下函數式編程的幾個特點：

1、程序=Function（input），函數求值過程無副作用。

2、避免了中間狀態和變數。

3、沒有if/while/switch/for等控制流。

等等

也許這正是函數式編程的精髓！讓你的代碼更簡短，更有描述性，更耐用。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！