BFE.dev前端刷题11 - 什么是composition？实现一个pipe()方法

bfe.dev 是一个针对前端的刷题网站，像是前端的LeetCode。该系列文章是我在上面的刷题日记。

题目11

BFE.dev#11 什么是Composition?实现pipe()

分析

这是目标。

/**
 * @param { Array<(arg: any) => any> } funcs 
 * @returns { (arg: any) => any }
 */
function pipe(funcs) {
  // your code here
}

我们需要把参数的function合并为一个，显然我们需要closure。

开始代码

根据上述要求，我们先返回一个接受一个参数的空function

function pipe(funcs) {
  return function(arg) {
    // TODO: 通过funcs和arg计算最终结果
  }
}

在计算结果的时候，funcs中的function都需要被调用并且修改同一个变量，我们声明一个result，然后一个for loop就可以搞定。

function pipe(funcs) {
  return function(arg) {
     let result = arg
     for (let func of funcs) {
       result = func.call(this, result)
     }
     return result
  }
}

注意没有用arrow function，以保留正确的this。

这个题目其实很简单。

用reduce

当发现了result和一个for循环的时候，很自然想到用reduce。

这个并不会对本质产生变化，只是一种更酷简洁的写法而已。我们试试。

function pipe(funcs) {
  return function(arg) {
     return funcs.reduce((result, func) => {
       return func.call(this, result)
     }, arg)
  }
}

通过，撒花！

这个题目很简单，有兴趣可以去 https://bfe.dev 自己试试。

希望能帮助到你，下次见！