Functional JavaScript Mini Book

你可以用两种方式定义一个箭头函数

([param] [, param]) => {
   statements
}
// or
param => expression

单个表达式可以写成一行, 而多行语句则需要 block {} 括起来.

看看旧的匿名函数怎么写一个使数组中数字都乘2的函数.

var a = [1,2,curry,es6,5];
a.map(function(x){ return x*2 });

用箭头函数会变成

a.map(x => x*2);

只是少了 function 和 return 以及 block, 不是吗? 如果觉得差不多, 因为你看惯了 JavaScript 的匿名函数, 你的大脑编译器自动的忽略了,因为他们不需要显示的存在.

而 map(x => x*2) 要更 make sense, 因为我们需要的匿名函数只需要做一件事情, 我们需要的是 一个函数 f, 可以将给定 x, 映射到 y. 翻译这句话的最简单的方式不就是 f = (x => x*2)

如果你觉得这还不足以说服改变匿名函数的写法, 那么想想以前写匿名函数中的经常需要 var self=this 的苦恼.

    var Multipler = function(inc){
      this.inc = inc;
    }
    Multipler.prototype.multiple = function(numbers){
      return numbers.map(function(number){
        return this.inc * number;
      })
    }
    new Multipler(2).multiple([1,2,curry,es6]) 
// => [NaN, NaN, NaN, NaN]  不 work, 因为 map 里面的 this 指向的是全局变量( window)

    Multipler.prototype.multiple = function(numbers){
      var self = this; // 保持 Multipler 的 this 的缓存
      return numbers.map(function(number){
        return self.inc * number;
      })
    }
    new Multipler(2).multiple([1,2,curry,es6]) // => [ 2, es6, 6, 8 ]

很怪不是吗, 确实是 Javascript 的一个 bug, 因此经常出现在各种面试题中, 问 this 到底是谁.

试试替换成 arrow function

Multipler.prototype.multiple = function(numbers){
  return numbers.map((number) => number*this.inc);
};

console.log(new Multipler(2).multiple([1,2,curry,es6]));// => [ 2, es6, 6, 8 ]

不需要 var self=this 了是不是很开心☺️现在, arrow function 里面的 this 会自动 capture 外层函数的 this 值.

完整代码

在JavaScript里创建一个函数是如此的 简单 … 比如:

function(x){
    return x*x;
}// => SyntaxError: function statement requires a name

但是, 为什么报错了这里. 因为创建一个匿名函数需要用表达式(function expression). 表达式是会返回值的:

var a = new Array() // new Array 是表达式, 而这整行叫语句 statement

但为什么说 function statement requires a name. 因为 JavaScript 还有一种 创建函数的方法--function statement. 而在上面这种写法会被认为是一个 function 语句, 因为并没有期待值. 而 function 语句声明是需要名字的.

简单将这个函数赋给一个变量或当参数传都不会报错, 因为这时他没有歧义,只能是表达式.比如:

var squareA = function(x){
    return x*x;
}

但是这里比较 tricky 的是这下 squareA 其实是一个具名函数了.

console.log(squareA) // => function squareA()

虽然结果是具名函数,但是过程却与下面这种声明的方式不一样.

function squareB(x){
    return x*x;
} // => undefined

squareB 用的是 function statement 直接声明(显然 statement 没有返回), 而 squareA 则是先用 function expression 创建一个匿名函数, 然后将返回的函数赋给了名为 squareA 的变量. 因为表达式是有返回的:

console.log(function(x){ return x*x});
// => undefined
// => function ()

第一个 undefined 是 console.log 的返回值, 因此 function() 则是打印出来的 function 表达式创建的匿名函数.

JavaScript 的函数是一等函数. 这意味着我们的函数跟值的待遇是一样的,于是它

可以赋给变量:

var square = function(x) {return x*x}

可以当参数, 如刚才见到的:

console.log(function(x){return x*x})

将函数传给了 console.log

可以被返回:

function multiply(x){
    return function(y){
        return x*y;
    }
}
multiply(1)(2) // => 2

假设我现在要对一个数组排序, 用我们熟悉的 sort

[1,3,2,5,4].sort( (x, y) => x - y )

如果我们要逆序的排序, 把减号左右的 x 和 y 呼唤,就这么简单, 但如果我是一个对象数组, 要根据对象的 id 排序:

[{id:1, name:'one'},
 {id:3, name:'three'}, 
 {id:2, name:'two'}, 
 {id:5, name:'five'},  
 {id:4, name:'four'}].sort((x,y) => x.id - y.id)

是不是已经能够感受到高阶函数与匿名函数组合的灵活性.

函数的返回值可以不只是值, 同样也可以是一个函数, 来看 Eweda 内部的一个工具函数 aliasFor, 他的作用是给函数 E 的一些方法起一些别名:

var E = () => {}
var aliasFor = oldName => {
    var fn = newName => {
      E[newName] = E[oldName];
      return fn;
    };
    return (fn.is = fn.are = fn.and = fn);
};

这里有两个 return, 一个是 fn 返回自己, 另一个是 aliasFor 也返回 fn, 并且给 fn 了几个别名 fn.is fn.are…

什么意思呢? fn 返回 fn. 很简单就是 fn() => fn, 那么 fn()()=>fn()=>fn …以此类推, 无论调用 fn 多少次,都最终返回 fn.

这到底有什么用呢, 由于这里使用了 fn 的副作用(side affect) 来干了一些事情 E[newName]=E[oldName], 也就是给 E 的方法起一个别名, 因此每次调用 fn 都会给 E 起一个别名. aliasFor 最后返回的是 fn 自己的一些别名, 使得可以 chain 起来更可读一些:

aliasFor('reduce').is('reduceLeft').is('foldl')

完整代码

var concatArray = function(chars){
  return chars.reduce(function(a, b){
    return a.concat(b);
  });
}
concat(['1','2','3']) // => '123'

var concatArray = function(chars, inc){
  return chars.map(function(char){
    return (+char)+inc + '';
  }).reduce(function(a,b){
      return a.concat(b)
  });
}
console.log(concatArray(['1','2','3'], 1))// => '234'

var multiple = function(a, b){
  return +a*b + ''
}
var concatArray = function(chars, inc){
  return chars.map(function(char){
    return multiple(char, inc);
  }).reduce(function(a,b){
      return a.concat(b)
  });
}
console.log(concatArray(['1','2','3'], 2)) // => '246'

var multiple = function(a){
  return function(b){
    return +b*a + ''
  }
}

var plus = function(a){
  return function(b){
    return (+b)+a + ''
  }
}
var concatArray = function(chars, stylishChar){
  return chars.map(stylishChar)
    .reduce(function(a,b){
      return a.concat(b)
  });
}
console.log(concatArray(['1','2','3'], multiple(2)))
console.log(concatArray(['1','2','3'], plus(2)))

有什么不一样呢 1. 处理数组中字符的函数被提取出来, 作为参数传入 2. 提取成柯里化的函数, 部分配置好后传入, 好处显而易见, 这下接口非常通畅 无论是外层调用

concatArray(['1','2','3'], multiple(2))

还是内部的 map 函数

chars.map(stylishChar)

这些接口都清晰了很多, 不是吗

这就是函数式的思想, 用已有的函数组合出新的函数, 而柯里化每消费一个参数, 都会返回一个新的部分配置的函数, 这为函数组合提供了更灵活的手段, 并且使得接口更为流畅.

在 Haskell 语言中, 函数是会自动柯里化的:

max 3 4

其实就是

(max 3) 4

可以看看 max 与 max 3 函数的 类型

ghci> :t max
max :: Ord a => a -> a -> a

看明白了么, Ord a => 表示类型约束为可以比较大小的类型, 因此 max 的类型可以翻译成: 当给定一个 a, 会得到 a -> a, 再看看 max 3 的类型就好理解了

ghci> :t max 3
(Num a, Ord a) => a -> a

左侧表示类型约束 a 可以是 Ord 或者 Num, 意思是 max 3 还是一个函数,如果给定一个 Ord 或者 Num 类型的参数 则返回一个 Ord 或者 Num.

现在是不是清晰了, 在 Haskell 中每给定一个参数, 函数如果是多参数的, 该函数还会返回一个处理余下参数的函数. 这就是自动柯里化.

而在 Javascript(以及大多数语言) 中不是的, 如果给定多参函数的部分参数, 函数会默认其他参数是 undefined, 而不会返回处理剩余参数的函数.

function willNotCurry(a, b, c) {
    console.log(a, b, c)
    return a*b-c;
}
willNotCurry(1)
// => NaN
// => 1 undefined undefined

如果使用自动柯里化的库 eweda, 前面的例子简直就完美了

var multiple = curry(function(a, b){
  return +b*a + ''
})
var plus = curry(function(a, b){
  return (+b)+a + ''
})

完整代码

我们可以用 Eweda 非常方便的 compose 方法来组合函数

var gf = E.compose(f, g)

说到了函数组合, 柯里化, 我想现在终于可以解释清楚为什么在这里选用 Eweda/Ramda 而不是 Underscore 了.

举个例子🌰 如果我现在想要 tasks 列表中所有属性为 completed 为 true 的元素, 并按照 id 排序.

underscore 里会这样写:

_(tasks)
    .chain()
    .filter( task => task.completed===true)
    .sortBy( task => task.id)
    .value();

这种方式怎么看都不是函数式, 而是以对象/容器为中心的串联，有些像 jquery 对象的链式调用, 或者我们可以写的函数式一些, 如

_.sortBy(_.filter(tasks, task => task.completed===true), task => task.id)

恩恩, 看起来不错嘛, 但是有谁是这么用 underscore的呢. 一般都会只见过 链式调用才是 underscore 的标准写法。

来对比一下用 Eweda/Ramda 解决的过程 :

compose(sortBy(task=>task.id), filter(task=>task.completed===true))(tasks)

好像没什么区别啊? 不就是用了 compose 吗?

区别大了这, 看见 tasks 是最后当参数传给 E.compose() 的吗? 而不是写死在filter 的参数中. 这意味着在接到需要处理的数据前, 我已经组合好一个新的函数在等待数据, 而不是把数据混杂在中间, 或是保持在一个中间对象中. 而 underscore 的写法导致这一长串 _.sortBy(_.filter()) 其实根本无法重用。

好吧如果你还看不出来这样做的好处. 那么来如果我有一个包含几组 tasks的列表 groupedTasks, 我要按类型选出 completed 为 true 并按 id 排序. 如我现在数据是这个：

groupedTasks = [
  [{completed:false, id:1},{completed:true, id:2}],
  [{completed:false, id:4},{completed:true, id:3}]
]

underscore:

_.map(groupedTasks,
   tasks => _.sortBy(_.filter(tasks, task => task.completed===true), task => task.id))

看见我们又把 _.sortBy(_.filter()) 这一长串原封不动的拷贝到了 map 里。 因为 underscore 一开始就要消费数据，使得很难重用，除非在套在另一个函数里：

function completedAndSorted(tasks){
  return _.sortBy(_.filter(tasks, task => task.completed===true), task => task.id))
}
_.map(groupedTasks, completedAndSorted)

只有这样才能重用已有的一些函数。或者虽然 underscore 也有 _.compose 方法，但是 几乎所有 underscore 的方法都是先消费数据（也就是第一个参数是数据），使得很难放到 compose 方法中，不信可以尝试把 filter 和 sortBy 搁进去，反正我是做不到。

来看看真正的函数组合

var completedAndSorted = compose(sortBy(task=>task.id),
                                 filter(task=>task.completed===true))
map(completedAndSorted, groupedTasks)

看出来思想完全不一样了吧.

由于 Eweda/Ramda 的函数都是自动柯里化,而且数据总是最后一个参数, 因此可以随意组合, 最终将需要处理的数据扔给组合好的函数就好了. 这才是函数式的思想. 先写好一个公式，在把数据扔给 公式。而不是算好一部分再把结果给另一个公式。

而 underscore 要么是以对象保持中间数据, 用 chaining 的方式对目标应用各种函数（书上会写这是Flow-Base programming，但我觉得其实是 Monad，会在下一章中介绍）, 要么用函数嵌套函数, 将目标一层层传递下去.

类似 compose, eweda/ramda 还有一个方法叫 pipe, pipe 的函数执行方向刚好与 compose 相反. 比如 pipe(f, g), f 会先执行, 然后结果传给 g, 是不是让你想起了 bash 的 pipe

find / | grep porno

实际上就是 pipe(find, grep(porno))(/)

没错,他们都是一个意思. 而且这个函数执行的方向更适合人脑编译(可读)一些.

如果你已经习惯 underscore 的这种写法

_(data)
  .chain()
  .map(data1,fn1)
  .filter(data2, fn2)
  .value()

那么转换成 pipe 是很容易的一件事情，而且更简单明了易于重用和组合。

pipe(
  map(fn1),
  filter(fn2)
)(data)

完整代码

reduce函数需要等待map返回新的coll后才能reduce, 那么可不可以一步直接算出来呢?

假如我们有一个函数xf可以变换reducing函数(上例的sum是reducing函数)的形式, 比如

xf(reduceFn) -> anotherReduceFn

再假如我们的新map函数可以做这种转换

map(inc)(sum) -> aShinyNewReduceFn

那么我们之前的reduce就可以写成

reduce(map(inc)(sum),0,[1,2,3])

yeah, 现在只需要一步就reduce出来结果了, reduce应用 map(inc)(sum) 来计算值, 只需要遍历一遍coll

但是如果我们不想改变map函数的接口, 原始形式的接口还是比较好写好读的

reduce(sum, 0, map(inc [1,2,3]))

那么需要进一步的抽象, 我把新的map函数叫做rmap好了

function rmap(fn, coll){
  reducer(coll, map(fn))
}

跟以前接口一样,接收函数和coll,但是返回一个由reducer生成的reducible, 所以就变成了

reduce(sum, 0, reducer([1,2,3], map(inc)))

等等,怎么做到的…你已经消费了coll了, 那reducing函数怎么进来的, reducer怎么知道用sum去reduce呢.

function rreduce(reduceFn, init, reducible){
  reducible(reduceFn, init)
}

reducer([1,2,3], map(inc))(sum, 0)

function reducer(coll, xf){
  return function(reduceFn, init){
    return coll.reduce(xf(reduceFn), init) (coll)
  }
}

首先看看不用 Monad 怎么解

eweda.installTo(this);
var landLeft = eweda.curry(function(n, pole){
    return [pole[0]+n, pole[1]];
});
var landRight = eweda.curry(function(n, pole){
    return eweda.reverse(landLeft(n, eweda.reverse(pole)));
});
var result = eweda.pipe(landLeft(1), landRight(1), landLeft(2))([0,0]);
console.log(result);
// => [3, 1]

还差一个判断皮尔斯是否掉下来的操作.

var landLeft = eweda.curry(function(n, pole){
    if(pole==='dead') return pole;
    if(Math.abs(pole[0]-pole[1]) > 3)
      return 'dead';
    return [pole[0]+n, pole[1]];
});
var landRight = eweda.curry(function(n, pole){
    if(pole==='dead') return pole;
    return eweda.reverse(landLeft(n, eweda.reverse(pole)));
});
var result = eweda.pipe(landLeft(10), landRight(1), landRight(8))([0,0]);
console.log(result);
// => dead

完整代码

---

我们先把皮尔斯放进 Either 盒子里, 这样皮尔斯的状态只有打开 Either 才能看见. 假设 Either Right 是活着, Left 的话皮尔斯挂了.

var land = eweda.curry(function(lr, n, pole){
    pole[lr] = pole[lr] + n;
    if(Math.abs(pole[0]-pole[1]) > 3) {
      return new Left("dead when land " + n + " became " + pole);
    }
    return new Right(pole);
});

var landLeft = land(0)
var landRight = land(1);

现在落鸟后会返回一个 Either, 要不活着, 要不挂了. 打开盒子的函数可以是这样的

var stillAlive = function(x){
    console.log(x)
}
var dead = function(x){
    console.log('皮尔斯' + x);
}
either(dead, stillAlive, landLeft(2, [0,0]))

好吧, 好像有一点点像了, 但是这只落了一次鸟, 如果我要落好几次呢. 这就需要实现 Either 的 >>= bind 方法了, 如果你还记得前面实现的 Functor, 这里非常像 :

var Monad = function(type, defs) {
  for (name in defs){
    type.prototype[name] = defs[name];
  }
  return type;
};
function Left(value){
  this.value = value
}
function Right(value){
  this.value=value;
}

Monad(Right, {
  bind:function(fn){
    return fn(this.value)
  }
})

Monad(Left, {
  bind: function(fn){
    return this;
  }
})

哦, 对了, either:

either = function(left, right, either){
    if(either.constructor.name === 'Right')
        return right(either.value)
    else
        return left(either.value)
}

我们来试试工作不工作.

var walkInLine = new Right([0,0]);
eitherDeadOrNot = walkInLine.bind(landLeft(2))
    .bind(landRight(5))
either(dead, stillAlive, eitherDeadOrNot)
// => [2,5]
eitherDeadOrNot = walkInLine.bind(landLeft(2))
  .bind(landRight(5))
  .bind(landLeft(3))
  .bind(landLeft(10)
  .bind(landRight(10)))

either(dead, stillAlive, eitherDeadOrNot)
// => "皮尔斯dead when land 10 became 15,5"

完整代码