如何读懂并写出装逼的函数式代码？

最新推荐文章于 2023-06-16 10:51:45 发布

CSDN 程序人生

最新推荐文章于 2023-06-16 10:51:45 发布

阅读量2.5k

点赞数

点击上方“程序人生”，选择“置顶公众号”

第一时间关注程序猿（媛）身边的故事

图片源自：Westworld Season 2

作者

左耳朵耗子

文章来源

https://coolshell.cn/articles/17524.html

作者之前在微博上看到有人分享下文中的一段函数式代码，代码已经贴到下面，原代码略有改动。作者以前写过一篇《函数式编程》的入门式文章，正巧借用这个例子，再升华一下原来的那篇文章，顺便向大家更好的介绍很多基础知识。

如需转载，请联系原作者授权。

对于函数式的版本，乍一看，的确令人非常费解，仔细看一下，你可能就晕掉了，似乎完全就是天书，看上去非常装逼，哈哈。不过，我感觉解析那段函数式的代码可能会一个比较有趣过程。

先看代码

这个代码平淡无奇，就是从一个数组中找到一个数，O(n)的算法，找不到就返回 null。

下面是正常的 old-school 的方式。不用多说。

//正常的版本
function find (x, y) {
  for ( let i = 0; i < x.length; i++ ) {
    if ( x[i] == y ) return i;
  }
  return null;
}

let arr = [0,1,2,3,4,5]
console.log(find(arr, 2))
console.log(find(arr, 8))

结果到了函数式成了下面这个样子（好像上面的那些代码在下面若影若现，不过又有点不太一样，为了消掉if语言，让其看上去更像一个表达式，动用了 ? 号表达式）：

//函数式的版本
const find = ( f => f(f) ) ( f =>
  (next => (x, y, i = 0) =>
    ( i >= x.length) ?  null :
      ( x[i] == y ) ? i :
        next(x, y, i+1))((...args) =>
          (f(f))(...args)))

let arr = [0,1,2,3,4,5]
console.log(find(arr, 2))
console.log(find(arr, 8))

为了讲清这个代码，需要先补充一些知识。

Javascript的箭头函数

首先先简单说明一下，ECMAScript2015 引入的箭头表达式。箭头函数其实都是匿名函数，其基本语法如下：

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
     // 等于 :  => { return expression; } 

// 只有一个参数时,括号才可以不加:
(singleParam) => { statements }
singleParam => { statements }

//如果没有参数,就一定要加括号:
() => { statements }

下面是一些示例：

var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];
var sum = arr.reduce((a, b) => a + b);  // 66
var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]
var double = arr.map(v => v * 2);       // [10, 12, 26, 0, 2, 36, 46]

看上去不复杂吧。不过，上面前两个 simple 和 max 的例子都把这箭头函数赋值给了一个变量，于是它就有了一个名字。有时候，某些函数在声明的时候就是调用的时候，尤其是函数式编程中，一个函数还对外返回函数的时候。比如下在这个例子：

function MakePowerFn(power) {
  return function PowerFn(base) {
    return Math.pow(base, power);
  } 
}

power3 = MakePowerFn(3); //制造一个X的3次方的函数
power2 = MakePowerFn(2); //制造一个X的2次方的函数

console.log(power3(10)); //10的3次方 = 1000
console.log(power2(10)); //10的2次方 = 100

其实，在 MakePowerFn 函数里的那个 PowerFn 根本不需要命名，完全可以写成：

function MakePowerFn(power) {
  return function(base) {
    return Math.pow(base, power);
  } 
}

如果用箭头函数，可以写成：

MakePowerFn = power  => {
  return base => {
    return Math.pow(base, power);
  } 
}

我们还可以写得更简洁（如果用表达式的话，就不需要 { 和 }，以及 return 语句）：

MakePowerFn = power => base => Math.pow(base, power)

我还是加上括号，和换行可能会更清楚一些：

MakePowerFn = (power) => (
  (base) => (Math.pow(base, power))
)

好了，有了上面的知识，我们就可以进入一个更高级的话题——匿名函数的递归。

匿名函数的递归

函数式编程立志于用函数表达式消除有状态的函数，以及for/while循环，所以，在函数式编程的世界里是不应该用for/while循环的，而要改用递归（递归的性能很差，所以，一般是用尾递归来做优化，也就是把函数的计算的状态当成参数一层一层的往下传递，这样语言的编译器或解释器就不需要用函数栈来帮你保存函数的内部变量的状态了）。

好了，那么，匿名函数的递归该怎么做？

一般来说，递归的代码就是函数自己调用自己，比如我们求阶乘的代码：

function fact(n){
  return n==0 ? 1 :  n * fact(n-1);
};
result = fact(5);

在匿名函数下，这个递归该怎么写呢？对于匿名函数来说，我们可以把匿名函数当成一个参数传给另外一个函数，因为函数的参数有名字，所以就可以调用自己了。 如下所示：

function combinator(func) {
  func(func);
}

这个是不是有点作弊的嫌疑？Anyway，我们再往下，把上面这个函数整成箭头函数式的匿名函数的样子。

（func) => (func(func))

现在你似乎就不像作弊了吧。把上面那个求阶乘的函数套进来是这个样子：

首先，先重构一下fact，把fact中自己调用自己的名字去掉：

function fact(func, n) {
  return n==0 ? 1 :  n * func(func, n-1);
}

fact(fact, 5); //输出120

然后，我们再把上面这个版本变成箭头函数的匿名函数版：

var fact = (func, n) => ( n==0 ? 1 :  n * func(func, n-1) )
fact(fact, 5)

这里，我们依然还要用一个fact来保存这个匿名函数，我们继续，我们要让匿名函数声明的时候，就自己调用自己。

也就是说，我们要把

(func, n) => ( n==0 ? 1 :  n * func(func, n-1) )

这个函数当成调用参数，传给下面这个函数：

(func, x) => func(func, x)

最终我们得到下面的代码：

( (func, x) => func(func, x) ) (  //函数体
  (func, n) => ( n==0 ? 1 :  n * func(func, n-1) ), //第一个调用参数
  5 //第二调用参数
);

好像有点绕，anyway, 你看懂了吗？没事，我们继续。

动用高阶函数的递归

但是上面这个递归的匿名函数在自己调用自己，所以，代码中有hard code的实参。我们想实参去掉，如何去掉呢？我们可以参考前面说过的那个 MakePowerFn 的例子，不过这回是递归版的高阶函数了。

HighOrderFact = function(func){
  return function(n){
    return n==0 ? 1 : n * func(func)(n-1);
  };
};

我们可以看，上面的代码简单说来就是，需要一个函数做参数，然后返回这个函数的递归版本。那么，我们怎么调用呢？

fact = HighOrderFact(HighOrderFact);
fact(5);

连起来写就是：

HighOrderFact ( HighOrderFact ) ( 5 )

但是，这样让用户来调用很不爽，所以，以我们一个函数把 HighOrderFact ( HighOrderFact ) 给代理一下：

fact = function ( hifunc ) {
  return hifunc ( hifunc );
} (
  //调用参数是一个函数
  function (func) { 
    return function(n){
      return n==0 ? 1 : n * func(func)(n-1);
    };
  }
);

fact(5); //于是我们就可以直接使用了

用箭头函数重构一下，是不是简洁了一些？

fact = (highfunc => highfunc ( highfunc ) ) (
  func => n =>  n==0 ? 1 : n * func(func)(n-1)
);

上面就是我们最终版的阶乘的函数式代码。

回顾之前的程序

我们再来看那个查找数组的正常程序：

//正常的版本
function find (x, y) {
  for ( let i = 0; i < x.length; i++ ) {
    if ( x[i] == y ) return i;
  }
  return null;
}

先把for干掉，搞成递归版本：

function find (x, y, i=0) {
  if ( i >= x.length ) return null;
  if ( x[i] == y ) return i;
  return find(x, y, i+1);
}

然后，写出带实参的匿名函数的版本（注：其中的if代码被重构成了？号表达式）：

( (func, x, y, i) => func(func, x, y, i) ) (  //函数体
  (func, x, y, i=0) => (
      i >= x.length ?  null :
         x[i] == y  ?  i : func (func, x, y, i+1)
  ), //第一个调用参数
  arr, //第二调用参数
  2 //第三调用参数
)

最后，引入高阶函数，去除实参：

const find = ( highfunc => highfunc( highfunc ) ) (
   func => (x, y, i = 0) => (
     i >= x.length ?  null :
           x[i] == y  ?  i : func (func) (x, y, i+1)
   )
);