函数式编程及响应式编程之己见

这段代码接受一个数组，返回每个成员加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。在响应式编程里，这种依赖关系是实时、动态变化的——结果会随着参数的修改同步更新，始终保持着固定的映射关系。