JavaScript函数式真正的浅析

// Array.slice 对于固定输入一定是固定输出, 且不依赖外部变量, 啥? 依赖了arr变量吗? 
// 其实这种写法和Array.prototype.slice(arr, 0, 3); 是一样的. 这样就理解了, 
// 你还学到一个东西 Array.slice是不会修改原数组滴! 
var arr = [1,2,3,4,5]; 
arr.slice(0,3); 
 
 // Array.splice 会修改xs, 所以是不纯的, 所以相同的输入不会有相同的输出! 
var xs.splice(0,3); 
//=> [1,2,3] 
xs.splice(0,3); 
//=> [4,5] 
xs.splice(0,3); 
//=> []  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

// 调用 doWht('我', '家里', '饭'); 
let doWhat = (who, where, what) => { 
  return who + '在' + where + '做' + what 
} 
 
// 柯里化后的等价效果 
// 调用 doWhat('我')('家里')('饭') 
let doWhat = who => where => what => { 
  return who + '在' + where + '做' + what 
} 
 
// 假设现在知道是'我'在'家', 至于做什么是不知道的 
// tmp函数就已经帮我们保存了值, 这样是非常灵活的. 
let doWhatCurry = doWhat('我')('家里')  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

// h(g(f(x))) 这是以前调用函数的方式 
var add1 = x => x + 1 
var mul5 = x => x * 5 
// compose会生成一个新的函数, 接收的参数全部传给add1, 然后add1的返回值传给mul5(注意注意!, mul5的参数个数只能有一个!!!), 然后compose生成的新的函数的返回值就是mul5的返回值. 
compose(mul5, add1)(2)  
1.
2.
3.
4.
5.

//命令式 
var persons = [...] 
for (var i = 0; persons.length; ++i) { 
  persons[i] = persons[i].toUppercase() 
} 
 
//声明式 
var persons = [...] 
persons.map(person => person.toUppercase())  
1.
2.
3.
4.
5.
6.
7.
8.
9.

// 假定如果  
let map = fn => list => list.map(fn); 
let add = (a, b) => a + b; 
 
// 函数incrementAll不是point free 风格 
// 因为这里提到了numbers参数, 需要给出一个命名. 
// 这样定义函数会导致我们需要多命名一个变量. 麻烦! 
let incrementAll = (numbers) => map(add(1))(numbers); 
 
// Point free风格的定义方法 
// 假设add被柯里化过了 
let incrementAll = map(add(1))  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

var Container = function(x) { 
  this.__value = x; 
} 
 
Container.of = x => new Container(x); 
 
Container.prototype.map = function(f){ 
  return Container.of(f(this.__value)) 
} 
 
Container.of(3).map(x => x+1).map(x => x*5) 
// of用来构建容器, map用来变换容器 
// Functor可以做很多很多事情, 具体的? 往下介绍.  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

// Maybe就是在普通容器上新增了一个检查空值的行为.  
var Maybe = function(x) { 
  this.__value = x; 
} 
 
Maybe.of = function(x) { 
  return new Maybe(x); 
} 
 
Maybe.prototype.map = function(f) { 
  return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value)); 
} 
 
Maybe.prototype.isNothing = function() { 
  return (this.__value === null || this.__value === undefined); 
} 
 
// 例子, 如果name是空的话就会输出空了 
var functor = Maybe.of({name: ‘mrcode'}) 
functor 
    .map(value => value.age) 
    .map(String.prototype.upperCase) 
    .map(value => console.log(value))  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

// Promise是通过catch方法来接收错误的 如: 
doSomething() 
    .then(async1) 
    .then(async2) 
    .catch(e => console.log(e)); 
 
// 完全一样     
var Left = function(x) { 
  this.__value = x; 
} 
var Right = function(x) { 
  this.__value = x; 
} 
 
// 完全一样 
Left.of = function(x) { 
  return new Left(x); 
} 
Right.of = function(x) { 
  return new Right(x); 
} 
 
// 这里不同！！！ 
Left.prototype.map = function(f) { 
  return this; 
} 
Right.prototype.map = function(f) { 
  return Right.of(f(this.__value)); 
} 
 
// 应用: 
var getAge = user => user.age ? Right.of(user.age) : Left.of("ERROR!") 
getAge({name: 'stark', age: '21'}).map(age => 'Age is ' + age); 
//=> Right('Age is 21') 
 
getAge({name: 'stark'}).map(age => 'Age is ' + age); 
//=> Left('ERROR!')  
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.

// 没毛病 
var IO = function(f) { 
    this.__value = f; 
} 
 
// ??? 看不懂, 待会解释.. 
IO.of = x => new IO(_ => x); 
 
// ??? 这是啥子鬼???? 
IO.prototype.map = function(f) { 
    return new IO(compose(f, this.__value)) 
};  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

var io_document = new IO(_ => window.document); 
io_document.map(function(doc){ return doc.title }); 
// 得到IO(documen.title)  
1.
2.
3.

// 固定的输入得到固定的输出 纯组件极大的增加了react的灵活程度 
// app 的状态交给一些状态机管理 比如redux 
var Text = props => ( 
    <div style={props.style}>{props.text}</div> 
)  
1.
2.
3.
4.
5.

// 输入当前状态和action, 输出nowState 
reducer(currentState, action) => newState  
1.
2.