JavaScript函数式编程指南：柯里化、组合与不可变数据

在日常的 JavaScript 开发中，随着业务逻辑的叠加，代码经常陷入复杂的状态交叉修改、多层括号嵌套和难以预测的副作用中。函数式编程（Functional Programming，简称 FP）提供了一种以纯函数、数据管道和稳定状态为中心的编程范式。本文聚焦于函数式编程中最具实用价值的三大核心基石：柯里化（Currying）、函数组合（Pipe 与 Compose）以及不可变数据（Immutability）。通过剖析它们的运作原理、实现机制与协同模式，帮助你在实际项目中写出易读、可测试且易于维护的高质量代码。

一、不可变数据：构建无副作用的状态底座

JavaScript 中的对象与数组均为引用类型。直接修改对象属性或对数组执行变异操作（例如 push、splice、sort）属于原地变更（In-place Mutation）。在多人协作或大型复杂系统里，多个函数如果同时持有并随意更改同一个对象引用，极易引发难以排查的数据污染问题。

不可变数据强调的是：数据一旦创建，便不再允许直接改写其内部状态。当需要更新数据时，必须生成包含新状态的新对象，而未发生变化的分支则沿用既有引用，这一机制称为结构共享（Structural Sharing）。

两种数据处理方式的关键差异对比

日常 JavaScript 不可变操作模式

在不引入外部库的前提下，原生 JavaScript 提供了简洁的语法支持不可变更新：

// 1. 对象的不可变更新（展开运算符）
const originalUser = { id: 101, name: "Alice", preferences: { theme: "dark" } };

// 更新顶层属性并增加新属性
const updatedUser = {
  ...originalUser,
  name: "Bob",
  status: "active"
};

// 嵌套属性更新：逐层展开，确保外层引用更新同时内层未变属性复用
const updatedPreferencesUser = {
  ...originalUser,
  preferences: {
    ...originalUser.preferences,
    theme: "light"
  }
};

// 2. 数组的不可变操作
const list = [1, 2, 3, 4];

// 新增元素：避免 push()
const appendedList = [...list, 5];

// 删除元素：避免 splice()，采用 filter()
const filteredList = list.filter(item => item !== 2);

// 修改元素：避免 list[i] = val，采用 map()
const mappedList = list.map(item => item === 3 ? 30 : item);

二、柯里化：将多元函数转为单一参数链

柯里化（Currying）是函数式编程中转换函数形态的核心技术。它的定义是：把接受多个参数的单一函数，转换为一系列只接受单一参数（或部分参数）的高阶函数链。当所有参数被逐一收集完整后，才触发最终运算并返回计算结果。

实现通用的 curry 工具函数

JavaScript 中每个函数对象都具有一个 length 属性，代表该函数显式声明的形参个数（Arity）。利用这一点，我们可以编写一个通用的 curry 包装器：

/**
 * 通用柯里化包装函数
 * @param {Function} fn 需要被柯里化的目标函数
 * @returns {Function} 柯里化后的函数
 */
function curry(fn) {
  return function curried(...args) {
    // 若当前收集到的实参数量已经达到或超过原函数声明的形参数量，立即执行
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    // 否则返回新函数，继续接收并拼接后续参数
    return function(...moreArgs) {
      return curried.apply(this, args.concat(moreArgs));
    };
  };
}

// 示例：基础多参数求和函数
function sumThree(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sumThree);

console.log(curriedSum(1)(2)(3)); // 输出 6
console.log(curriedSum(1, 2)(3)); // 输出 6
console.log(curriedSum(1)(2, 3)); // 输出 6

柯里化在工程中的真实价值

柯里化并非仅仅是调用语法的改变，它的核心价值在于参数预设（Partial Application）与函数特化。通过将通用函数的一部分配置参数先行固化，我们可以定制出高度复用的一元函数，为后续的函数组合打下基础：

// 原始的属性读取与过滤函数
const filterBy = curry((prop, targetValue, list) => 
  list.filter(item => item[prop] === targetValue)
);

// 业务数据
const users = [
  { name: "John", role: "admin", active: true },
  { name: "Sarah", role: "member", active: true },
  { name: "Mike", role: "member", active: false }
];

// 通过柯里化预先配置条件，生成专注特定业务逻辑的单一功能函数
const getAdmins = filterBy("role", "admin");
const getActiveMembers = filterBy("active", true);

console.log(getAdmins(users));       // 只保留 admin 角色
console.log(getActiveMembers(users)); // 只保留 active 为 true 的用户

三、函数组合：声明式装配数据处理管道

在面对复杂的数据转换任务时，命令式代码通常会产生大量的中间变量，或者形成层层嵌套的括号调用：

// 传统嵌套调用：需要从内向外“倒着读”，难以快速理解执行流
const result = formatCurrency(calculateTax(applyDiscount(rawPrice)));

函数组合（Composition）则是将多个一元纯函数串联在一起的技术。上一个函数的输出结果直接作为下一个函数的输入参数，形成一条清晰透明的数据流通管道。

实现 Pipe 与 Compose

组合函数主要有两种方向：

• Compose（从右往左）：符合数学中的复合函数定义 (f ∘ g)(x) = f(g(x))，使用 Array.prototype.reduceRight 实现。
• Pipe（从左往右）：符合阅读习惯与工序流转直觉，先传入的数据先经过前面的工序处理，使用 Array.prototype.reduce 实现。

// 从左往右执行的管道函数 Pipe
const pipe = (...fns) => (initialValue) =>
  fns.reduce((acc, fn) => fn(acc), initialValue);

// 从右往左执行的组合函数 Compose
const compose = (...fns) => (initialValue) =>
  fns.reduceRight((acc, fn) => fn(acc), initialValue);

// 示例基础处理原子函数
const trim = str => str.trim();
const toLower = str => str.toLowerCase();
const wrapInTag = tag => str => `<${tag}>${str}</${tag}>`;

// 使用 pipe 拼装处理管线
const prepareSlug = pipe(
  trim,
  toLower,
  str => str.replace(/\s+/g, "-"),
  wrapInTag("span")
);

console.log(prepareSlug("  Functional Programming In JS  "));
// 输出: <span>functional-programming-in-js</span>

四、三大核心协同实战：构建电商订单结算系统

单一的柯里化或纯函数在独立使用时可能显得琐碎，但当不可变数据作为输入底座、柯里化函数作为独立工序零件、Pipe 管道作为组装流水线三者协同配合时，函数式编程的威力才会真正展现。

下面我们来看一个典型的电商结算管道实例：系统需要对原始订单进行校验、筛选有货商品、计算商品总价、应用会员折扣、添加运费与增值税，并最终格式化输出结算单据。

// 1. 模拟输入数据（不可变原始对象）
const order = {
  orderId: "ORD-2026-8899",
  isVip: true,
  items: [
    { id: 1, name: "Mechanical Keyboard", price: 120, count: 1, inStock: true },
    { id: 2, name: "Ergonomic Mouse", price: 60, count: 2, inStock: true },
    { id: 3, name: "Desk Pad", price: 25, count: 1, inStock: false } // 无货
  ]
};

// 2. 柯里化通用计算原子函数（纯函数，绝不修改入参对象）
const filterInStock = (order) => ({
  ...order,
  items: order.items.filter(item => item.inStock)
});

const calculateSubtotal = (order) => {
  const subtotal = order.items.reduce((sum, item) => sum + item.price * item.count, 0);
  return { ...order, subtotal };
};

// 柯里化：先行配置折扣率
const applyVipDiscount = curry((discountRate, order) => {
  const discount = order.isVip ? order.subtotal * discountRate : 0;
  return {
    ...order,
    discount,
    discountedTotal: order.subtotal - discount
  };
});

// 柯里化：先行配置免邮门槛与基础运费
const applyShipping = curry((freeThreshold, baseShipping, order) => {
  const shipping = order.discountedTotal >= freeThreshold ? 0 : baseShipping;
  return {
    ...order,
    shipping,
    totalWithShipping: order.discountedTotal + shipping
  };
});

// 柯里化：先行配置税率
const applyTax = curry((taxRate, order) => {
  const tax = Number((order.totalWithShipping * taxRate).toFixed(2));
  return {
    ...order,
    tax,
    finalAmount: Number((order.totalWithShipping + tax).toFixed(2))
  };
});

// 最终输出格式化
const formatSummary = (order) => ({
  orderId: order.orderId,
  itemsCount: order.items.length,
  subtotal: `¥${order.subtotal.toFixed(2)}`,
  discount: `-¥${order.discount.toFixed(2)}`,
  shipping: `¥${order.shipping.toFixed(2)}`,
  tax: `¥${order.tax.toFixed(2)}`,
  payableAmount: `¥${order.finalAmount.toFixed(2)}`
});

// 3. 使用 pipe 拼装装配线
const processOrder = pipe(
  filterInStock,
  calculateSubtotal,
  applyVipDiscount(0.1),         // 注入 10% VIP 折扣配置
  applyShipping(200, 15),        // 满 200 免邮，否则收取 15 元运费
  applyTax(0.06),                // 注入 6% 税率配置
  formatSummary
);

// 执行流水线
const summary = processOrder(order);
console.log(summary);
/*
输出结果：
{
  orderId: 'ORD-2026-8899',
  itemsCount: 2,
  subtotal: '¥240.00',
  discount: '-¥24.00',
  shipping: '¥0.00',
  tax: '¥12.96',
  payableAmount: '¥228.96'
}
*/

// 验证原 order 对象未受任何污染
console.log(order.items.length); // 仍然为 3

五、工程实践建议与适用边界

函数式编程能够显著提升业务代码的可靠性与表达力，但在日常开发中应当避免过度追求纯粹而陷入教条主义。理解其适用边界同样关键：

• CPU 密集型或极高频场景：如游戏渲染帧循环、大规模 Canvas/WebGL 动画或超大二进制数据处理。频繁创建新对象与闭包会加剧垃圾回收（Garbage Collection）的负担，此时局部就地更新（In-place Mutation）和 TypedArray 是更优解。
• 适度保持函数粒度：不必将每一行简单的条件分支都拆分为柯里化函数。通常优先将公共验证逻辑、通用转换运算、规则计费模块进行柯里化抽象。
• 管道调试技巧：在 pipe 链路中定位中间数据时，可以插入一个简短的 trace 打印函数：

  const trace = curry((label, data) => {
    console.log(`[${label}]:`, data);
    return data;
  });
  
  // 插入管道中即可无侵入打印指定节点的中间态
  pipe(
    filterInStock,
    trace("过滤无货后"),
    calculateSubtotal
  );

总结而言，不可变数据守护了系统的数据边界，柯里化打磨出标准、可复用的一元函数零件，而函数组合则将这些零件自底向上装配成严谨的数据流水线。掌握这三者的配合，能让你的 JavaScript 代码更加精炼、稳健且充满美感。