JavaScript函數式編程中代碼組合的示例分析

這篇文章主要介紹JavaScript函數式編程中代碼組合的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

函數式編程中代碼組合(compose)如何理解?

定義: 顧名思義，在函數式編程中，Compose就是將幾個有特點的函數拼湊在一起， 讓它們結合， 產生一個嶄新的函數

代碼理解:

// 一個將小寫轉大寫的函數
let toUpperCase = (x) => x.toUpperCase();

// 一個在字符后加！的函數
let exclaim = (x) => x + '!';

// 將兩個函數組合起來, 這里假設我們實現了compose
let shout = compose(toUpperCase,exclaim);

shout('js每日一題') // JS每日一題 !, 顯示結果里上面兩個函數的特點都應用上了

pointfree

代碼組合中有一個重要的概念pointfree（永遠不要說出你的數據）, 它的意思是指函數無須提及將要操作的數據是什么樣的

有點晦澀，我們還是上代碼理解一下

// 我們有一個將字符轉換成大寫并且將其空格轉換為'-'的函數
// 細節(jié)的同學應該發(fā)現這個函數暴露了一個word形參
// 根據pointfree定義，此函數非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-');

// 下面這個函數與上面的功能一致，但我們可以觀察到其沒有數據暴露,所以其為pointfree模式
let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)

說了這么多，他能干什么呢 ? 它能夠幫助我們減少不必要的命名，讓代碼保持簡潔和通用

compose實現

上面我們都是假設已經存在compose方法, 接下來我們來為其實現

首先分析其特性

• 兩個函數都有一個共同的參數
• 函數的執(zhí)行順序從右至左
• 前面函數執(zhí)行的結果交由后面的函數處理

根據上面的示例及我們分析的特性來實現一個最簡版的

// 這樣子其實就能滿足我們上面示例的要求了
const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};

結束了嗎? 并沒有,我們可以看到上面的compose示例都只是傳入了兩個函數，因為我們的簡版compose實現也只支持兩個函數，那么如果我們想要支持一條很長很長的管道的時候，顯然上面的compose就不夠用了, 接著我們來看優(yōu)秀的開源庫redux的compose實現

// 摘自 https://github.com/reactjs/redux/blob/master/src/compose.js
export default function compose(...funcs) {
  // 沒有傳入函數運行直接返回參數
  if (funcs.length === 0) {
    return arg => arg
  }
  // 只傳入一個函數，就返回其本身
  if (funcs.length === 1) {
    return funcs[0]
  }
  
  // 核心代碼其實就是一句reduce, reduce特性就是按順序執(zhí)行，并且將結果傳遞給下一次執(zhí)行, 這里多說一句, reduce順序執(zhí)行多個相依賴的promise也很好用
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

總結

將多個單特性的函數組合到一起的函數

多個函數服務一組數據(共同參數)

不必說出數據(pointfree)

函數從右至左順序執(zhí)行，結果做為下一個函數的參數

以上是“JavaScript函數式編程中代碼組合的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！