说到编程范式，函数式编程和响应式编程是两个绕不开的话题。它们虽然听起来有点学术，但实际用起来，能让代码变得更简洁、更可预测。先来看看函数式编程到底是怎么回事。
1. what is 函数式编程？
函数，在编程里通常可以理解为：输入 → 执行 → 结果。它不是命令式的那套，而是把一段操作逻辑封装起来，给定输入，就能得到输出。一个符合函数式编程理念的“函数”，通常有这几个特点：
- 函数必须有入参，并且输出会根据入参的不同而变化。
- 函数执行的整个过程中，不会对全局变量、外部属性等产生任何影响（也就是没有副作用）。
- 函数式编程的代码量小，干净利落。
举个例子：
var arr = [1,2,3,4,5];
function addOne (array) {
for(var i=0; i这段代码接受一个数组，返回每个成员加1后的结果。但问题也很明显：
- 难以复用——如果需求变成 addTwo、addThree，就得不断改函数名和内部逻辑。
- 代码太啰嗦，for 循环写起来很累赘。
·函数式编程改进版：
let arr = [1,2,3,4,5];
arr.map(item=> item+1); // 3,4,5,6,7这里用原生的 Array.prototype.map 方法，代码量骤减，复用性也上来了。整个函数做的事情非常直观：入参 → 每项参数 +1 → 返回新数组。可以说，map() 就是一个纯函数（pu re function）。
2. 响应式编程
前端领域也有“响应式”这个词，比如 Bootstrap 的响应式布局。但这里说的显然不是那个，而是响应式编程（Reactive Programming）的概念。用 Vue 或 Angular 的双向绑定来理解会很清楚：
// template: i'am {{ name }}
// js: name = 'jhon';在前端 MVVM 框架里，数据双向绑定是一个核心机制。模板中的变量实时反映数据中 name 的值，而且如果你修改了 name，模板里的值也会跟着变——数据与视图是同步发生的，因为模板本身就是对数据的一个映射。
再举个更简单的例子：
let a = 1, b = 2;
let c = a + b; // 3这里 c 的值是通过 a + b 赋值的。如果 a 和 b 不是固定的，而是变化的值，那么 c 也不会固定为3。在响应式编程里，这种依赖关系是实时、动态变化的——结果会随着参数的修改同步更新，始终保持着固定的映射关系。
