JavaScript中pipe原理實戰

JavaScript中pipe原理

代碼示例

const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x); 
複製代碼

原理

一行代碼中信息量是很是豐富的，能夠從如下幾個方面來分析

(...fns)

• ...是ES6標準中的數組擴展運算符

• 擴展運算符能夠展開數組： Math.max(...[1,2,3]) 等價於 Math.max(1,2,3)

• 同時與解構賦值結合起來，用於生成數組，上述代碼示例中就是使用該方法，具體例子： [...fns] = [1,2,3] 則fns=[1,2,3]

  • 解構賦值：ES6容許按照必定模式從數組和對象中提取值，而後對變量進行賦值，這被稱爲解構；示例： let [a,b,c] = [1,2,3]

=>

• 這個就是箭頭函數了，左邊是函數參數，右邊是函數體
• 箭頭函數有本身的特性，好比其中的this指向
  • this的指向的是定義時所在的對象，而不是使用時所在的對象
  • 不能夠當作構造函數
  • 不能夠使用arguments對象，能夠用rest參數代替
    • rest參數是一種叫法，指的是(...variableName)這種寫法的函數傳參方式
  • 不能夠使用yield命令
  • 箭頭函數沒有prototype屬性
  • 不能和new一塊兒使用

reduce

• 該函數做用於數組對象
• 接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值
• 函數原型：Array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • 咱們能夠定義函數function(total, currentValue, currentIndex, arr)，做爲個性化的邏輯處理部分，並手動指定初始值initialValue
  • 初始值的做用在於首次執行自定義函數時，total參數的值爲咱們設置的初始值initialValue
  • currentValue爲當前數組的值，也就是currentValue === arr[currentIndex]

函數科裏化

• 柯里化函數是一種由須要接受多個參數的函數轉化爲一次只接受一個參數的函數：若是一個函數須要3個參數，那柯里化後的函數會接受一個參數並返回一個函數來接受下一個函數，這個函數返回的函數去傳入第三個參數，最後一個函數會應用了全部參數的函數結果。

• 將上述代碼示例轉換一下形式：

  const pipe = function(x, ...fns) {
  	fns.reduce((y, f) => f(y), x);
  }
  複製代碼

進一步拆解

• 爲了看到pipe函數的實際做用，進一步將上述函數進行拆解，用最簡單的語法表示，以更清楚窺探其內部原理

  function pipe(x, ...fns){
  		let total = x;
  		for(let f in fns){
  			total = f(total)
  		}
  		return total;
  	}
  複製代碼

示例

• 當咱們調用pipe(x, f1, f2)時，返回f2(f1(x))

• 代碼示例

  const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x);
  
  const f1 = x => {
      return x+1;
  }
  
  const f2 = x => {
      return 2 * x;
  }
  
  // (1+1)*2 = 4
  let result = pipe(f1, f2)(1);
  console.log(result);
  複製代碼