函数式编程是一种强调计算过程和数据流组织的编程范式，近年来越来越多地渗透到JavaScript的日常开发中。前端框架的Hooks机制、状态管理库的Reducer设计，甚至数组的map和filter方法，背后都带着函数式思想的影子。很多开发者写过无数个回调函数，却未必意识到自己已经在使用函数式编程的某些技巧。真正的进阶不是背熟几个API，而是理解这些API背后的设计哲学，然后主动地用这种思维方式去组织代码。
纯函数：消除不确定性的根基
函数式编程的基石是纯函数。一个函数如果满足两个条件，就可以被称为纯函数：相同的输入永远产生相同的输出，并且执行过程中不产生任何可观察的副作用。所谓副作用，指的是函数对外部状态造成的任何修改，比如改变全局变量、修改传入的参数对象、打印日志、发起网络请求等等。日常开发中写的很多函数其实并不纯，它们隐式地依赖某个全局配置项，或者悄悄修改了某个共享对象，这会让代码的行为变得难以预测。
来看一个具体的对比。下面这个函数根据用户级别计算折扣，但它直接修改了传入的user对象：
function applyDiscount(user) {
// 直接修改入参，产生副作用
if (user.level === 'vip') {
user.discount = 0.8;
} else {
user.discount = 1;
}
return user;
}
const user = { name: '张三', level: 'vip' };
const result = applyDiscount(user);
console.log(result); // { name: '张三', level: 'vip', discount: 0.8 }
console.log(user); // 原对象也被改了，这不是期望的行为
这个函数修改了外部传入的对象，导致调用方在函数执行完之后发现自己的数据被污染了。如果另一个模块也在使用同一个user对象，就可能出现难以排查的bug。而纯函数的写法是返回一个新对象，完全不触碰入参：
function applyDiscount(user) {
// 返回新对象，不修改原数据
if (user.level === 'vip') {
return { ...user, discount: 0.8 };
}
return { ...user, discount: 1 };
}
const user = { name: '张三', level: 'vip' };
const result = applyDiscount(user);
console.log(result); // { name: '张三', level: 'vip', discount: 0.8 }
console.log(user); // 原对象保持原样
纯函数带来的最大好处是确定性。当你测试一个纯函数时，不需要搭建复杂的上下文环境，传入固定的参数就能断言固定的输出。代码重构时，你可以放心地移动、提取或合并纯函数，因为只要输入不变，输出就一定不变。这种确定性还使得纯函数天然支持缓存，比如可以把参数序列化成key，把计算结果存起来，下次遇到相同参数直接返回缓存值。
不可变数据：让状态变化有迹可循
与纯函数紧密相关的另一个概念是不可变数据。在JavaScript里，对象和数组是引用类型，直接修改它们的属性或元素，会影响到所有持有相同引用的代码。大型应用中，多个模块往往共享同一份数据，如果某处悄悄修改了数组中的一个元素，另一个正在遍历该数组的模块就会产生难以预料的后果。不可变数据并不是说数据永远不能变，而是说每次更新都生成一个新的数据副本，旧的数据保持不变。
数组的更新在函数式风格中通常借助扩展运算符或者concat、map这类方法来完成。下面这段代码展示了可变写法与不可变写法的差异：
// 可变写法，直接修改原数组
const arr = [1, 2, 3];
function addItem(arr, item) {
arr.push(item);
return arr;
}
const arr1 = addItem(arr, 4); // arr 变成了 [1, 2, 3, 4]
// 不可变写法，返回新数组
const list = [1, 2, 3];
function appendItem(list, item) {
return [...list, item];
}
const newList = appendItem(list, 4);
console.log(list); // 还是 [1, 2, 3]
console.log(newList); // [1, 2, 3, 4]
有人会担心，每次修改都复制一份数据，性能会不会很差。这个问题要分场景看。对于小规模数据，复制开销微乎其微；对于高频更新的复杂数据结构，可以借助结构共享的方式降低开销——比如使用现成的不可变数据结构库，或者依赖框架层面的优化。更重要的是，不可变数据让状态流变得透明：每次状态变化都对应一条清晰的记录，旧状态始终可以通过引用访问到，这给调试和回滚带来了极大的便利。尤其在多人协作的项目中，不可变数据能有效避免一类非常隐蔽的引用共享bug。
当然，不可变数据的理念在JavaScript中并不强制。你完全可以在项目里混合使用两种风格，但建议在核心业务逻辑中保持数据的不可变性。这样做的收益在于，当多个函数同时接收同一份数据时，你可以确定它们之间不会互相干扰，每个函数都只是把数据看作自己的入参，然后输出一个新的数据，这正好与纯函数的理念相辅相成。
高阶函数与函数组合：用拼装替代堆砌
高阶函数是指接收函数作为参数，或者返回一个新函数的函数。JavaScript中的Array.prototype.map、filter和reduce都是典型的高阶函数。它们把遍历的细节封装起来，让开发者只关注每次迭代要做什么。与for循环相比，高阶函数表达的意图更加明确：map表示转换，filter表示筛选，reduce表示汇总。这种语义化的表达使得代码读起来像是在描述业务逻辑，而不是描述循环变量的递增过程。
函数组合则更进一步，它把多个单一用途的函数拼装成一个新函数，让数据依次经过每个函数的处理。下面的例子实现了两个函数的组合：
// 简单的两个函数组合
function compose(f, g) {
return function (x) {
return f(g(x));
};
}
function double(n) {
return n * 2;
}
function addOne(n) {
return n + 1;
}
// 先加一，再翻倍
const doubleAfterAddOne = compose(double, addOne);
console.log(doubleAfterAddOne(3)); // 8
从这个例子可以看出，组合的核心思想是数据从右向左流过每个函数，前一个函数的输出恰好是后一个函数的输入。这也意味着每个函数都必须保持单一职责，并且遵循同样的输入输出约定。当你有多个小函数时，组合能让代码的层次变得非常清晰——你不需要在一个函数内部写十几行处理逻辑，而是把逻辑拆成几个小函数，然后用组合的方式把它们串联起来。
为了让组合更符合日常使用习惯，可以扩展compose支持任意数量的函数，也可以提供从左向右执行版本的pipe：
// 支持任意数量函数的组合
function compose(...fns) {
return function (initialValue) {
return fns.reduceRight((acc, fn) => fn(acc), initialValue);
};
}
// 管道，函数从左向右依次执行
function pipe(...fns) {
return function (initialValue) {
return fns.reduce((acc, fn) => fn(acc), initialValue);
};
}
const addOne = (n) => n + 1;
const double = (n) => n * 2;
const toFixed = (n) => Number(n.toFixed(2));
// 先加一，再翻倍，再取两位小数
const calculate = pipe(addOne, double, toFixed);
console.log(calculate(0.5)); // 3
组合的前提是函数的输入和输出类型能够衔接上。如果某个函数的输出是一个Promise，而下一个函数期望接收普通值，那么组合就会失效。这也引出了函数式编程中的另一个话题：如何处理异步和副作用。实际项目中，网络请求和磁盘读写都离不开副作用，完全避免它们是不可能的。函数式编程并不是要求你消灭所有副作用，而是把副作用限制在特定的边界内。比如可以把异步操作封装在一个返回Promise的函数中，让调用方通过Promise的组合方式串联多个异步步骤。组合与高阶函数的强大之处，在于你将更多的精力放在每个小函数本身的正确性上，而组装方式由组合函数统一处理。
实践重构：从命令式循环到函数式管道
理解了上面这些概念之后，最好的巩固方式是把一段典型的命令式代码重构为函数式风格。下面这个例子处理一组订单数据，需求是：找出金额大于100的订单，按金额从高到低排序，最后只保留订单号列表。
// 命令式写法
const orders = [
{ id: 1, amount: 50 },
{ id: 2, amount: 200 },
{ id: 3, amount: 150 },
{ id: 4, amount: 80 }
];
const result = [];
for (let i = 0; i < orders.length; i++) {
if (orders[i].amount > 100) {
result.push(orders[i]);
}
}
result.sort((a, b) => b.amount - a.amount);
const ids = [];
for (let j = 0; j < result.length; j++) {
ids.push(result[j].id);
}
console.log(ids); // [2, 3]
命令式写法的每一步都在描述怎么做，变量被反复赋值，很容易在循环中犯错或者遗漏边界条件。如果用函数式风格来写，整个流程可以变成一个管道，每个环节只处理一件事：
const orders = [
{ id: 1, amount: 50 },
{ id: 2, amount: 200 },
{ id: 3, amount: 150 },
{ id: 4, amount: 80 }
];
const getLargestOrderIds = (orders) =>
orders
.filter((order) => order.amount > 100)
.sort((a, b) => b.amount - a.amount)
.map((order) => order.id);
console.log(getLargestOrderIds(orders)); // [2, 3]
重构后的代码每一行都对应一个明确的操作：filter负责筛选，sort负责排序，map负责提取字段。读代码的时候，一眼就能看出数据的流向，不需要逐行跟踪循环变量的变化。更重要的是，这段代码没有修改传入的orders数组，测试的时候可以直接传入不同数据做断言。
不过要注意，函数式编程不是万能的。在性能极其敏感的场景中，一次完整的数据遍历就能完成的逻辑，如果拆成多个高阶函数调用链，可能会产生多次遍历的开销。此外，过于抽象的函数组合也可能降低代码的可读性，尤其是当团队中其他开发者不熟悉函数式风格时。因此，务实的做法是：在业务逻辑中使用高阶函数和不可变数据，在必要的地方接受副作用并明确标记出来，而不是强行把一切都包装成纯函数。真正的进阶不是信奉某种教条，而是在合适的场景用合适的工具。
函数式编程JavaScript进阶纯函数修改时间：2026-08-29 04:51:24