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);
  复制代码