JavaScript 函数式编程核心概念：纯函数与不可变数据

图 0：函数式编程核心双支柱体系架构概览

一、纯函数：确定性与副作用的严格约束

在日常开发中，一个普通函数往往包含许多隐藏的行为：它可能会读取环境变量、调用接口，或者修改外部传入的对象属性。这种“暗地里发生的作用”就是副作用。而纯函数在设计上对这种行为进行了绝对的限制。

具体而言，纯函数必须同时满足以下两项严苛准则：

• 确定性（相同输入必然得到相同输出）：函数的返回值仅取决于传入的参数。只要入参相同，无论在什么时刻、调用多少次，其返回结果永远一致。
• 无副作用（No Side Effects）：函数在执行过程中，绝不改变外部作用域中的任何状态，包括但不限于修改全局变量、修改入参引用的属性、执行 DOM 操作、写日志或发起异步网络请求。

代码对比：非纯函数 vs 纯函数

我们通过一段简单的购物车结算函数来观察差异：

// ❌ 非纯函数示例
let discountRate = 0.1; // 依赖外部隐式状态

function calculateTotalImpure(cart) {
  // 产生了副作用：直接修改了入参对象的属性
  cart.total = cart.price * cart.quantity * (1 - discountRate);
  return cart.total;
}

// ✅ 纯函数重构示例
function calculateTotalPure(price, quantity, discount) {
  // 所有依赖通过参数传入，计算过程封闭，不修改任何外部对象
  return price * quantity * (1 - discount);
}

在非纯函数 calculateTotalImpure 中，如果外部的 discountRate 被其他异步任务修改，或者调用该函数导致原 cart 对象被修改，后续的代码逻辑极易因共享状态污染而崩溃。而在纯函数 calculateTotalPure 中，所有数据流转均显式暴露在接口上，函数内部宛如一个密封运算器。

图 1：非纯函数与纯函数的数据流动与作用域边界对比原理图

二、不可变数据：引用透明与状态一致性

理解了纯函数后，紧接着需要解决数据存储与流动的问题。在 JavaScript 中，除基本类型外，对象、数组和函数都是引用传递。如果一个函数为了返回计算结果而直接修改了传入的对象，那么即便是纯粹的计算逻辑，也会因为对象内部的变动而破坏其他模块的数据预期。

不可变数据（Immutable Data）是指：数据一旦被创建，其内容就永远不可被更改。任何想要“更新”数据的操作，都必须通过基于原有数据派生出一份新的数据副本，而原数据保持完好无损。

JavaScript 原生机制中的可变性陷阱

许多开发者经常混淆 const 与“不可变”的概念：const 仅保证变量标识符绑定的内存地址不变，但无法阻止对象内部属性的修改。

const user = { name: "Alice", roles: ["editor"] };
user.name = "Bob"; // 运行时不会报错，原数据被直接改变！
user.roles.push("admin"); // 数组突变（Mutation）

为了保证不可变性，必须杜绝上述的就地突变（In-Place Mutation），采用浅拷贝拓展或结构共享方式生成新对象：

// 使用展开运算符创建新对象与新数组
const updatedUser = {
  ...user,
  name: "Bob",
  roles: [...user.roles, "admin"]
};

// 验证引用透明性
console.log(user.name); // 输出 "Alice"，原对象保持不变
console.log(user === updatedUser); // 输出 false，产生新引用

图 2：原地内存突变与不可变结构更新在内存分配上的对比拓扑

三、推导与实战重构四步法

将现有的命令式、多副作用代码重构为纯函数与不可变数据风格，可以遵循一套标准化的工程推导路径。我们以一个常见的“用户订单项过滤与积分更新”业务逻辑为例。

图 3：从命令式突变到纯函数与不可变数据的四步推导工作流

重构实战演示

// 【重构前】命令式突变代码
function processOrderImperative(order, minPrice) {
  // 破坏性操作 1：使用 splice 直接删减原数组项
  for (let i = order.items.length - 1; i >= 0; i--) {
    if (order.items[i].price < minPrice) {
      order.items.splice(i, 1);
    }
  }
  // 破坏性操作 2：直接修改入参对象属性
  order.points = order.items.reduce((sum, item) => sum + item.price, 0) * 0.05;
  return order;
}

// 【重构后】遵循纯函数与不可变规范
function processOrderFunctional(order, minPrice, pointRate = 0.05) {
  // 步骤 1 & 2：使用 filter 生成全新过滤数组，避免修改原 items
  const filteredItems = order.items.filter(item => item.price >= minPrice);
  
  // 步骤 3：纯计算提取总积分
  const points = filteredItems.reduce((sum, item) => sum + item.price, 0) * pointRate;
  
  // 步骤 4：基于浅拷贝构建并返回全新对象
  return {
    ...order,
    items: filteredItems,
    points: Math.round(points)
  };
}

四、工程协作优势与性能考量

将纯函数与不可变数据结合使用，能为现代前端和复杂服务端系统带来显著的工程架构优势：

• 极速变化检测（引用比较）：在 React、Redux 或 Vue 的状态树中，如果数据是不可变的，我们只需要通过 prevProps.data === nextProps.data 进行浅层引用比较，即可判断数据是否发生改变，避免昂贵且耗时的深度递归比较。
• 极佳的可测试性与无状态并发：由于纯函数不依赖全局状态，测试时无需编写冗长的 Mock 脚本，只需传入假数据并断言返回值即可。在多线程（如 Web Workers）环境下，不可变数据天然具备线程安全特性，绝无竞态条件冲突。
• 时间旅行与调试溯源：因为每次状态更新都保留了历史快照，应用可以轻而易举地实现“撤销/重做”功能以及精准的状态回溯日志。

图 4：纯函数与不可变数据日常代码审查与架构决策指南

五、全文总结与实践检查清单

掌握纯函数与不可变数据，并不是要求在整个项目中极端地摒弃所有状态和 I/O，而是要求开发者建立“核心纯粹，边界隔离”的架构意识——把复杂的业务逻辑、数据转换和公式运算收敛到可预测的纯函数中，而将所有的网络请求、本地存储、DOM 更新等不可避免的副作用明确推移至系统外圈（即控制器或事件挂钩层）。

在日常开发与代码审查中，可以对照以下清单进行快速自查：

1. 入参保护：函数体内是否出现了 obj.prop = ...、arr.push()、arr.splice() 等就地修改操作？若有，应立即替换为浅拷贝解构或纯数组方法。
2. 环境依赖：函数是否读取了 window、document、本地缓存或模块顶级变量？若有，是否可以通过函数参数显式传递进去？
3. 输出稳定：输入相同的参数时，是否存在因 Math.random() 或 Date.now() 导致输出不一致的情况？如有时间戳需求，应将其作为参数传入。
4. 浅冻结兜底：在开发环境下，是否需要使用 Object.freeze() 来辅助捕捉意外的属性写入行为？

通过坚持践行纯函数与不可变数据规范，你的 JavaScript 代码将具备更高的健壮性、更强的自文档化能力，并从容应对复杂业务系统的长期演进。