函数式编程

我觉得学习函数式编程以案例来学习是最快的方法,我看了很多讲解还是实操起来学的快,推荐函数式编程指南这本书,同时还要看ramda,我是一开始用的ramda这个工具,这个工具让函数式写起来更方便。因为这本书中运用到了ramda,所有我觉得有必要两个同时看,看完书前几张基本概念的理解后,等看到到案例了再去看ramda,这样学起来就快了。如果网上找不到书的可以问我要。
demo大都是以react为案例来写的

一些概念

容器

我的理解:有了这个容器,每次执行函数一次就把值又放到容器里面了,再次操作再次取值再次放入进去,十分方便,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Container就是这个容器
var Container = function(x) {
this.__value = x;
}

Container.of = function(x) { return new Container(x); };

// 加了map后就是另外一种形式了叫做functor,
// functor 是实现了 map 函数并遵守一些特定规则的容器类型

// map传入函数,执行完用of再次把值放入容器里面,
Container.prototype.map = function(f){
return Container.of(f(this.__value))
}

// 这里就展示了两次在map里面执行返回数值到容器里面
Container.of("bos").map(concat("waw")).map(R.prop("length"));
// 结果 {__value: 6}

这里如果看不懂可以这样理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 这是一次map
Container.of("bos").map(concat("waw"))
// 这里执行map后 相当于变成了
var a = concat("waw")("bos");
Container.of(a);

// 这是两次map
Container.of("bos").map(concat("waw")).map(R.prop("length"));
// 这里变成了
var a = concat("waw")("bos"); // 合并的字符串
// R是ramda语法
var len = R.prop("length")("wawbos") // wawbos的length 是=>6;
Container.of(len);
// {__value: 6}

Maybe

这个是在容器里面添加了空值判断,Maybe 会先检查自己的值是否为空,然后才调用传进来的函数。这样我们在使用 map 的时候就能避免的空值了的麻烦了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var Maybe = function(x){
this.__value = x;
}
Maybe.of = (x) =>{
return new Maybe(x);
}

Maybe.prototype.isNothing = function() {
return (this.__value === null || this.__value === undefined);
}

Maybe.prototype.map = function(f){
return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value))
}
Maybe.of("absck kbas").map(match(/a/ig)); // => {"__value": ["a", "a"]}
Maybe.of(null).map(match(/a/ig)); // => {"__value": null}
Maybe.of({name: "brois"}).map(R.prop("age")).map(add(10)); // => {"__value": null}

纯函数

纯函数是一种相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var xs = [1,2,3,4,5];

// 纯的
xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

// 不纯的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

// ----------------------

// 不纯的
var minimum = 21;

var checkAge = function(age) {
return age >= minimum;
};


// 纯的
var checkAge = function(age) {
var minimum = 21;
return age >= minimum;
};

// 这种可以理解为不改变外部变量,或者不受外部变量而影响,

// ---------------------

// 不纯的
var signUp = function(attrs) {
var user = saveUser(attrs);
welcomeUser(user);
};

var saveUser = function(attrs) {
var user = Db.save(attrs);
...
};

var welcomeUser = function(user) {
Email(user, ...);
...
};

// 纯的
var signUp = function(Db, Email, attrs) {
return function() {
var user = saveUser(Db, attrs);
welcomeUser(Email, user);
};
};

var saveUser = function(Db, attrs) {
...
};

var welcomeUser = function(Email, user) {
...
};

副作用包含

  • 更改文件系统
  • 往数据库插入记录
  • 发送一个 http 请求
  • 可变数据
  • 打印/log
  • 获取用户输入
  • DOM 查询
  • 访问系统状态

IO

像这样的虽然是IO操作,但是是纯函数的方式,不会受外部的影响,

1
2
3
4
5
var getFromStorage = function(key) {
return function() {
return localStorage[key];
}
}

一般不会用上面这种,而是像下面这样,

1
2
3
4
5
6
7
8
9
10
11
12
13
var IO = function(f) {
this.__value = f;
}

IO.of = function(x) {
return new IO(function() {
return x;
});
}

IO.prototype.map = function(f) {
return new IO(R.compose(f, this.__value));
}

IO 跟之前的 functor 不同的地方在于,它的 __value 总是一个函数
IO 把非纯执行动作包裹到函数里,目的是延迟执行这个非纯动作。

实际操作

1
2
3
4
5
6
7
var url = new IO(function () {return window.location.href;});

var toPairs = R.compose(R.map(R.split('=')), R.split('&'));
var fii = function(key) {
return R.map(R.compose(R.concat(key), R.split('/')), url);
}
fii("地址:").__value(); // => 地址: path,xxxx

monad

一个 functor,只要它定义个了一个 join 方法和一个 of 方法,并遵守一些定律,那么它就是一个 monad
这个的场景比如当用到多层io的时候会出现map(map(f));这个时候其实无需嵌套一层的,直接返回里面的值就可以了,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var maybe = function(x){
this._value = x;
}
maybe.of = function(x) {
return new maybe(x)
}
maybe.prototype.map=function(f){
return maybe.of(f(this._value));
};
maybe.prototype.isNothing = function(){
return (this._value === null || this._value === undefined)
}
// 注意这里的join,返回了_value
maybe.prototype.join = function(){
return this.isNothing() ? Maybe.of(null) : this._value;
}
var safeProp = R.curry(function(x, obj) {
return new maybe(obj[x]);
});

var safeHead = safeProp(0);

var joinTest = function(mma){
return mma.join()
}

var address = R.compose(
joinTest,
R.map(safeProp('street')),
joinTest,
R.map(safeHead),
safeProp("address"))
let arrs = {
address:
[
{
street: {name: 'Mulburry', number: 8402},
postcode: "WC2N"
}
]
};
let a = address(arrs);
// a => maybe{_value: {name: "Mulburry", number: 8402}}

了解了join,然后把map和join打包在一个函数里面,这个函数可以叫做chain或者flatMap,他的形式如下

1
2
3
var chain = curry(function(f, m){
return m.map(f).join(); // 或者 R.compose(join, map(f))(m)
});

然后可以把上面的代码优化下

1
2
3
4
5
var address = R.compose(
chain(safeProp('street')),
chain(safeHead),
safeProp("address"))
// 为什么chain里面直接用参数自带的map而上面的是R.map,因为这里的参数是maybe,他的map方法和Ramda的原理是一样的,

applicative functor

applicative functor 是实现了 ap 方法的 pointed functor
场景:把一个 functor 的函数值应用到另一个 functor 的值上
比如:

1
R.add(Container.of(2), Container.of(3));

这种是不对的,add取不到里面的值,需要一个ap函数来把一个 functor 的函数值应用到另一个 functor 的值上

1
2
3
4
5
Container.prototype.ap=function(f){
return f.map(this.__value)
}

Container.of(R.add(2)).ap(Container.of(3));

这里比较绕,做好心理准备,从左向右执行,Container.of(R.add(2)),这里构造了一个Container,里面的__value是R.add(2)这个函数,然后它调用了ap方法,这个参数是Container.of(3),所以

Container.prototype.ap=function(f){

这里的 fContainer.of(3),然后 Container.of(3)调用了map方法,传的参数是this.__value,注意这里重点,这个 this.__valueR.add(2) ; 因为是Container.of(R.add(2))调用的ap方法,

return f.map(this.__value)
}

然后 f.map(this.__value)这里调用的事

Container.prototype.map = function (f) {

这里的f就是 R.add(2)了,因为是Container.of(3)调用的map方法,所以这里的this.__value就是3了, 最后就成了 R.add(2)(3);

return Container.of(f(this.__value))
}

如果还是没理解,在我注释的地方console一下就明白了,

上面的方法还可以写成
Container.of(2).map(R.add).ap(Container.of(3));

案例

demo1 遍历数组返回虚拟dom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义好数据
constructor(props){
super(props)
this.state = {
data = [{
id: 1,
name: "王"
}, {
id: 2,
name: "李"
}, {
id: 3,
name: "张"
}]
}
}
// 由map 遍历数据,再由addIndex给每个数据加上一个index,并返回dom,就是我们需要的虚拟dom了
domap = ()=> R.addIndex(R.map(this.doRender, this.state.data))
doRender = (data,key) => {<p key={key}>{data.name}</p>}
render() {
return {this.domap()}
}

阮一峰ramda介绍
ramda中文网
ramda英文网