一、理解JavaScript純函數

函數式編程中有一個非常重要的概念叫純函數，JavaScript符合函數式編程的范式，所以也有純函數的概念；

• 在react開發中純函數是被多次提及的；
• 比如react中組件就被要求像是一個純函數（為什么是像，因為還有class組件），redux中有一個reducer的概念，也是要求必須是一個純函數；
• 所以掌握純函數對于理解很多框架的設計是非常有幫助的；

簡單總結一下純函數的定義：

• 確定的輸入，一定會產生確定的輸出；
• 函數在執行過程中，不能產生副作用；

副作用的理解

• 副作用（side effect）其實本身是醫學的一個概念，比如我們經常說吃什么藥本來是為了治病，可能會產生一些其他的副作用；
• 在計算機科學中，也引用了副作用的概念，表示在執行一個函數時，除了返回函數值之外，還對調用函數產生了附加的影響，比如修改了全局變量，修改參數或者改變外部的存儲；

純函數在執行的過程中就是不能產生這樣的副作用：

• 副作用往往是產生bug的 “溫床”。

純函數的案例

我們來看一個對數組操作的兩個函數：

• slice：slice截取數組時不會對原數組進行任何操作,而是生成一個新的數組；
• splice：splice截取數組, 會返回一個新的數組, 也會對原數組進行修改；
• slice就是一個純函數，不會修改傳入的參數；
  
  
  
  
  

純函數的優勢

為什么純函數在函數式編程中非常重要呢？

• 因為你可以安心的編寫和安心的使用；
• 你在寫的時候保證了函數的純度，只是單純實現自己的業務邏輯即可，不需要關心傳入的內容是如何獲得的或者依賴其他的外部變量是否已經發生了修改；
• 你在用的時候，你確定你的輸入內容不會被任意篡改，并且自己確定的輸入，一定會有確定的輸出；

React中就要求我們無論是函數還是class聲明一個組件，這個組件都必須像純函數一樣，保護它們的props不被修改：

二、JavaScript柯里化

柯里化也是屬于函數式編程里面一個非常重要的概念。

柯里化定義總結：

• 只傳遞給函數一部分參數來調用它，讓它返回一個函數去處理剩余的參數；
• 這個過程就稱之為柯里化；

柯里化的結構

那么柯里化到底是怎么樣的表現呢？

為什么需要有柯里化呢？

讓函數的職責單一

復用參數邏輯

讓函數的職責單一：

• 在函數式編程中，我們其實往往希望一個函數處理的問題盡可能的單一，而不是將一大堆的處理過程交給一個函數來處理；
• 那么我們就可以將每次傳入的參數在單一的函數中進行處理，處理完后在下一個函數中再使用處理后的結果；

比如上面的案例我們進行一個修改：傳入的函數需要分別被進行如下處理

• 第一個參數 + 2
• 第二個參數 * 2
• 第三個參數 ** 2

復用參數邏輯：

• makeAdder函數要求我們傳入一個count（并且如果我們需要的話，可以在這里對count進行一些修改）；
• 在之后使用返回的函數時，我們不需要再繼續傳入count了
  
  這里我們在演示一個案例，需求是打印一些日志：
• 日志包括時間、類型、信息；
  

三、手寫自動柯里化函數

調用myCurrying函數即可將普通的函數，轉成柯里化后的函數：

function sum(num1, num2, num3) {return num1 + num2 + num3 } const res = sum(10, 20, 30) console.log(res)// function sum(num1) { // return function (num2) { // return function (num3) { // return num1 + num2 + num3 // } // } // } // console.log(sum(10)(20)(30))function myCurrying(fn) {return function curried(...args) {if (args.length >= fn.length) {// 如果當前curried函數傳遞的參數個數(args.length)>=需要變成柯里化函數（fn）的參數的個數// 符合：currySum(10, 20, 30)， 則直接調用fn執行函數即可return fn.apply(this, args)} else {// 如果當前curried函數傳遞的參數個數<需要變成柯里化函數（sum）的參數的個數// 則需要繼續返回一個函數來繼續接收剩余的參數return function (...args2) {// 接收道參數后，需要遞歸調用curried來檢查當前傳入的參數個數是否達到原始函數fn的參數個數return curried.apply(this, [...args, ...args2])}}} }const currySum = myCurrying(sum) console.log(currySum(10, 20, 30)) console.log(currySum(10, 20)(30)) console.log(currySum(10)(20, 30)) console.log(currySum(10)(20)(30))

四、理解組合函數

組合（Compose）函數是在JavaScript開發過程中一種對函數的使用技巧、模式：

• 比如我們現在需要對某一個數據進行函數的調用，執行兩個函數fn1和fn2，這兩個函數是依次執行的；
• 那么如果每次我們都需要進行兩個函數的調用，操作上就會顯得重復；
• 那么是否可以將這兩個函數組合起來，自動依次調用呢？
• 這個過程就是對函數的組合，我們稱之為 組合函數（Compose Function）；

手寫自動組合函數：

剛才我們實現的compose函數比較簡單，我們需要考慮更加復雜的情況：比如傳入了更多的函數，在調用compose函數時，傳入了更多的參數：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS高级——纯函数、柯里化（手写自动柯里化函数）、组合函数（手写自动组合函数）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。