JavaScript函数式编程以纯函数、不可变性和高阶函数为核心,强调“做什么”而非“怎么做”,通过函数组合与显式数据转换保障可预测性、可测试性与并发安全。

JavaScript 中的函数式编程,核心是用函数表达逻辑、避免状态变更和副作用。它不强调“怎么做”,而聚焦于“做什么”——把计算看作数学函数的求值过程。不可变性不是附加技巧,而是整个范式的地基:数据一旦创建,就不再被修改,所有“更新”都通过生成新数据完成。
函数是一等公民,让组合与抽象成为可能
在 JS 里,函数可以赋值给变量、作为参数传入、从另一个函数中返回。这使得高阶函数(如 map、filter、reduce)天然可用。比如:
-
[1, 2, 3].map(x => x * 2)不改变原数组,返回新数组[2, 4, 6] -
const logger = fn => (...args) => { console.log('run'); return fn(...args); };是典型的函数包装,无需侵入原逻辑
纯函数保障可预测性和可测试性
纯函数满足两个条件:输入相同,输出一定相同;不读写外部变量、不修改参数、不发起请求或打印日志。例如:
-
const add = (a, b) => a + b;—— 纯,安全可复用 -
let tax = 0.1; const totalPrice = price => price * (1 + tax);—— 非纯,tax变则结果变,难以控制
这种确定性让单元测试只需覆盖输入输出,也使调试时能精准定位问题源头。
立即学习“Java免费学习笔记(深入)”;
不可变性直接解决状态失控问题
JS 的对象和数组是引用类型,直接修改容易引发隐性 bug,尤其在 React、Redux 或并发场景中。不可变性强制你显式创建副本,带来三重好处:
- 状态可追溯:每次更新都保留前一版本,支持时间旅行调试
-
引用比较即变更检测:
prevUser !== nextUser就说明状态变了,比深比较快得多 - 天然并发安全:多个函数同时读取同一份数据,不会因某处篡改导致其他逻辑出错
ES6+ 提供了简洁手段实现不可变操作:对象展开 {...obj, name: 'new'}、数组展开 [...arr, newItem]、Object.assign,无需引入库也能落地。
它不是排斥“改变”,而是重构“改变”的方式
现实业务当然需要更新用户年龄、添加购物车商品。函数式编程不禁止这些行为,而是要求你用函数明确表达意图:
- 不用
user.age = 30,而用const newUser = {...user, age: 30} - 不用
list.push(item),而用const newList = [...list, item] - 嵌套结构更新也保持一致:用多层展开或工具函数封装,而非
user.profile.address.city = 'Beijing'
这种写法初看啰嗦,但换来的是状态流清晰、协作成本降低、bug 减少——尤其在多人维护、长期迭代的项目中,优势会越来越明显。











