JavaScript函數式程式設計中程式碼組合(compose)的理解

這篇文章帶給大家的內容是關於JavaScript函數式程式設計中程式碼組合(compose)的理解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

函數式程式設計程式碼組合(compose)如何理解?

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

程式碼理解:

// 一个将小写转大写的函数
let toUpperCase = (x) => x.toUpperCase();

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

// 将两个函数组合起来, 这里假设我们实现了compose
let shout = compose(toUpperCase,exclaim);

shout('js每日一题') // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了

pointfree

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

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

// 我们有一个将字符转换成大写并且将其空格转换为'-'的函数
// 细节的同学应该发现这个函数暴露了一个word形参
// 根据pointfree定义，此函数非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-');

// 下面这个函数与上面的功能一致，但我们可以观察到其没有数据暴露,所以其为pointfree模式
let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)

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

compose實作

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

#首先分析其特性

• 兩個函數都有一個共同的參數
• 函數的執行順序從右到左
• 前面函數執行的結果交由後面的函數處理

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

// 这样子其实就能满足我们上面示例的要求了
const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};

結束了嗎? 並沒有,我們可以看到上面的compose範例都只是傳入了兩個函數，因為我們的簡版compose實現也只支持兩個函數，那麼如果我們想要支持一條很長很長的管道的時候，顯然上面的compose就不夠用了, 接著我們來看優秀的開源函式庫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特性就是按顺序执行，并且将结果传递给下一次执行, 这里多说一句, reduce顺序执行多个相依赖的promise也很好用
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

總結

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

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

不必說出資料(pointfree)

函數從右到左順序執行，結果做為下一個函數的參數

#這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教學影片欄位！

以上是JavaScript函數式程式設計中程式碼組合(compose)的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！