前端项目中最让人头疼的 bug。往往不是逻辑错误，而是“状态被意料之外地修改了”。你传了一个对象给某个函数，之后发现原对象的值变了；不过，你调用了一个工具方法，页面突然白屏。排查半天才找到是因为它修改了全局变量。这些问题的根源，都在于函数不够“纯”。纯函数是函数式编程中最基础也最关键的概念。它就像代码质量的“守门员”——一旦你开始写纯函数，很多难以追踪的 bug 就自动消失了。按理说，

一、什么是纯函数？两个硬条件

一个函数要被称为“纯函数”。必须同时满足两个条件：

1. 相同的输入，永远得到相同的输出。不过，不依赖任何外部可变状态。
2. 没有副作用。其实，不会修改传入的参数，不会改变全局变量。不会操作 DOM，不会发起网络请求。

// 非纯函数：依赖外部变量
let total = 0;不过，function addToTotal {
total += num;按理说，// 修改了外部变量
return total;}
// 纯函数：所有依赖都通过参数传入
function add {
return a + b;}

// 非纯函数：修改了传入的数组
function addUser {
users.push;// 副作用，影响了原数组
return users;}
// 纯函数：返回新数组，原数组不变
function addUser {
return;}

二、副作用：躲在暗处的 bug 源

前端开发中，副作用无处不在。

⚠️ 痛点提醒：If you’re seeing unexpected UI flickers or stale data after an API call,you’re likely dealing with a hidden mutation—probably because your state is being altered directly.

副作用本身不是“坏”的——一个完全没有副作用的程序什么也做不了因为它不能显示内容、不能发请求、不能响应使用者操作。说起来，主要是控制副作用的范围: 把副作用集中到组件层或特定模块中。让主要的数据处理和业务逻辑保持纯粹。

React 的 useEffect)" 和 Vue 的 watch)" 就是典型的副作用容器——框架把副作用“关”在特定钩子里其余部分尽量保持纯函数。

三、纯函数带来的三个实打实好处

. 可缓存

当你遇到某个计算耗时大且输入频繁重复时你可能会想 “能否缓存一下？”这正是可缓存性所解决的问题。  函数式编程让这一步骤变得简单又安全，因为输入输出关系确定无疑。下面演示如何手动 memoize 一个昂贵计算，并说明 React 自带 hook 的用法。

function memoize {
const cache = new Map;return function {
if ) return cache.get;按理说，const result = fn;按理说，cache.set;return result;}，}
// 一个昂贵计算
function heavyComputation{ /* ... 大量计算 */ }
const memoizedHeavy = memoize;

React 的 useMemo 和 useCallback 本质上也是基于这个原理——只有当依赖变化时才重新计算。

. 可测试

如果你的业务逻辑只是一堆 pure 函数。那么单元测试就像吃早餐一样轻松：给定输入，断言输出，无需 mock 或 setup。你只需要关注每个小功能块，而不是整个程序的大环境。下面给出一个极简例子：

// 纯函数，只负责格式化价格
function formatPrice{
/* ... */
}
test=>{
expect).toBe;
})

这样。你可以覆盖更多边界情况，而且测试跑得更快、更稳定。

. 可预测

有时候，你可能会遇到同一段代码在不同时间点表现不同 —— 那通常代表着某些地方隐藏着不可预期的数据流或副作用。把业务拆分成多个 pure 函数后每一步都是确定性的。你只需验证每个输入/输出，而不必追踪全局状态变化。这种可预测性让定位 bug 更直观，也更高效。

四、如何把现有代码改造成 pure 函数？

至于改造前，逻辑与副作用混在一起

async function loadAndRender{
const res = await fetch;const data= await res.json;const filtered=data.filter;const sorted=filtered.sort=>b.amount-a.amount);document.querySelector
.innerHTML=sorted.map.join;}

这段代码一次做四件事：请求数据、过滤、排序、渲染。怎么说呢，后三步都是副作用或对数据做变异。这正是导致调试难度升高和维护成本攀升的原因之一之一。

说到改造后，pure 计算 + 副作用外壳

// pure: 数据处理逻辑
function getTopOrders{
return orders.filter
.sort=>b.amount-a.amount);按理说，}
// pure: 渲染模板生成字符串
function renderOrders{
return orders.map.join;}
// 副作用集中在入口层
async function init{
const res=await fetch;话说回来，const data=await res.json;const topOrders=getTopOrders;document.querySelector
.innerHTML=renderOrders;}

现在 getTopOrders 与 renderOrders 都是 pure，可以单独测试、缓存复用；怎么说呢，而所有网络/DOM 操作都被聚集在 init 中。使得其职责单一并易于维护。

再看依赖注入，让依赖变成参数

// 全局变量版本
const API_URL='/api/users';async function fetchUsers{
return fetch.n);}
// 参数注入版本
async function fetchUsers{
return fetch.n);}
// 或者封装成工厂，可配置 base URL
const createUserFetcher==>=>fetch.n);按理说，

覆盖率。因为调用者决定真正使用哪条方法。

痛点提醒 ：如果你刚开始接触 React 或 Vue 时总觉得“事件处理应该写多层嵌套才能完成”，那很可能正是在把业务逻辑和 UI 状态绑死。怎么说呢，

• 事件处理器本身就是 “动作”。如 onClick、onChange 必须触发更新。但它们应只负责调度，而非执行所有数据运算。
• API 请求模块天然带有副作用。只需要单独抽离出来而不是强行转成 pure，这样可以保留可读性与清晰职责分离。老实说，
• DOM 操作无法避免。但应限制在最小范围内，以免污染业务层面代码结构与可读性。怎么说呢，”
• 过度推崇 pure —— 当你为了满足 purity 而增加参数或者使用柯里化导致阅读困难时就该停下来思考整体架构是否适配当前需求。按理说，”

原则 ：pure 函数应成为主要业务块。但不是唯一组成部分，将所有动作放置少量明确位置，让大部分代码保持干净无杂音，即为常用方法。

主要思想 ：把 “计算” 与 “动作” 明确分离

• pure="" ：仅