JavaScript中pipe实战

Posted 2021-02-08 chinazhonghao

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

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);