本文初始编辑地址，源自我的CSDN博客：我的CSDN博客

1. what is 函数式编程？

函数，在编程中，通常体现为： 输入 => 执行 => 结果。他不是命令式的，而是对一段操作进行逻辑封装，拿到输入，就能产出结果。通常来说，满足函数式编程的特性的“函数”应该有如下特点:

函数必须有入参，并且函数的产出会根据入参的不同而变化。
函数执行的整个流程中，不会对全局变量、外部属性等产生影响。
函数式编程代码量小，干净。
举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
var arr = [1,2,3,4,5];

function addOne (array) {

    for(var i=0;i<array.length;i++){
        array[i] += 1;
    }

    return array;
}

addOne(arr); // 2,3,4,5,6

写了一个方法，接受一个数组，产出数组每个成员+1，但这段代码的不足之处在于：

难以复用，如果需求提出 addTwo,addThree方法，需要不断修改函数名和内部逻辑。
内部的代码很啰嗦， for 循环很low。
·函数式编程改进版：

1
2
let arr = [1,2,3,4,5];
arr.map(item=> item+1); // 3,4,5,6,7

这里，改进使用了原生的 Array.prototype.map 方法，代码量缩小了很多不说，而且复用性进一步提升。整个函数做的事情现在非常直观，入参 => 每项参数 + 1 => 返回新数组，由此，可以说，map()方法是一个纯函数(pure function)。

2. 响应式编程

前端中也有一个概念叫响应式，bootstrap 。这里当然说的不是这个，对于响应式编程的概念，我想提及Vue或者 angular的双向绑定来阐述：

1
2
3
4
5
6
7
// template: 

i'am {{ name }}

// js:

name = 'jhon';

在前端MVVM的框架中，都有一个数据双向绑定的概念，这里的模版中的变量，实时反映了数据中的 name 变量的 value，而且，如果此时我修改了 name 的值，那么模版中对应的值也会跟着修改。数据 <=> 视图 是同时发生，同时改变的，因为模版就是对数据的一个映射。

再举个例子：

c的值，是通过 a + b 来赋值的，如果ab不是固定的，而是变化的值，那么 c 的值也不会固定为3。

1
2
3
let a = 1,b=2;

let c = a + b; // 3

不难看出，响应式编程特点：

同步发生，结果会随着修改参数而实时、动态地变化。
存在固定的映射关系。