JavaScript中pipe原理實戰

摘要： const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x); 複製程式碼 原理 一行程式碼中資訊量是非常豐富的，可以從以下幾個方面來分析 (...fns) ...

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命令

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);
  複製程式碼