JS每日一題：函數式編程中代碼組合(compose)如何理解?

Kaede 發布于2019-08-23 16:08 / 760人閱讀

摘要：期函數式編程中代碼組合如何理解定義顧名思義，在函數式編程中，就是將幾個有特點的函數拼湊在一起，讓它們結合，產生一個嶄新的函數代碼理解一個將小寫轉大寫的函數一個在字符后加的函數將兩個函數組合起來這里假設我們實現了每日一題每日一題顯示結果里上面

20190315期

函數式編程中代碼組合(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)

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

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

云服務器 GPU云服務器 js函數式編程視頻函數式編程函數式編程指針函數式編程語言?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102720.html

JS每日一題：函數式編程中純函數如何理解?

摘要：期函數式編程中純函數如何理解概念不依賴執行的上下文，也不影響上下文的變量，輸出只由輸入決定代碼理解一下綜上，非純函數輸入依賴外部變量綜上，非純函數輸出改變外部變量綜上純函數輸出輸入不影響外部變量純函數的好處相信大家發現了，無論是概念還是代碼 20190313期函數式編程中純函數如何理解? 概念: 不依賴執行的上下文，也不影響上下文的變量，輸出只由輸入決定代碼理解一下 // 綜上，非...

Zoom 2019-08-23 15:55 評論0 收藏0
淺析Redux源碼

摘要：用法源碼由在年創建的科技術語。我們除去源碼校驗函數部分，從最終返回的大的來看。這個返回值無法被識別。洋蔥模型我們來看源碼源碼每個都以作為參數進行注入，返回一個新的鏈。改變原始組數，是一種副作用。 @(Redux)[|用法|源碼] Redux 由Dan Abramov在2015年創建的科技術語。是受2014年Facebook的Flux架構以及函數式編程語言Elm啟發。很快，Redux因其...

lifesimple 2019-08-22 17:13 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

zacklee 2019-08-30 15:55 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

lbool 2019-08-23 14:52 評論0 收藏0
前端知識點(二)

摘要：在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行時。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行內元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

Alex 2019-08-02 14:09 評論0 收藏0