JavaScript 函数式编程核心：纯函数、柯里化与组合实战

函数式编程基础：纯函数

函数式编程强调函数作为一等公民，核心在于建立清晰的映射关系。Vue 3 和 React 16.8+ 对函数组件的推广，正是得益于这种声明式的编程范式。实现函数式编程的首要条件是确保使用纯函数。纯函数具有“幂等”特性：对于相同的输入，无论调用多少次，必然返回完全相同的输出结果，且不会对外部状态产生副作用。

第1步：识别非纯函数 vs 纯函数

目的：理解可变数据带来的副作用风险。

非纯函数往往直接修改传入的参数或依赖外部变量，导致状态不可控；而纯函数仅依赖于输入参数并返回新结果。

// 非纯函数：splice 会修改原数组，产生副作用
function getFirst1(arr) {
  return arr.splice(0, 1);
}

// 纯函数：slice 返回新数组，不修改原数组
function getFirst2(arr) {
  return arr.slice(0, 1);
}

const arr = [1, 2, 3, 4, 5];
getFirst1(arr); // 返回 [1]，arr 变为 [2, 3, 4, 5]
getFirst1(arr); // 再次调用返回 [2]，结果不一致

getFirst2(arr); // 始终返回 [1]，arr 保持原样不变

另一类常见的非纯函数是依赖外部环境的函数。例如，版本检查函数若引用全局变量 availableVersion，当该变量变化时，相同输入也会得到不同输出。虽然将版本号硬编码在函数内部可使其变纯净，但这牺牲了灵活性。此时，需要引入函数柯里化来解决。

第2步：处理环境依赖的痛点

入口：避免硬编码，保持函数灵活性的同时维持纯度。

为解决硬编码弊端，可以使用更高阶的抽象手段，如柯里化和组合函数，将变化的部分与逻辑分离。

函数柯里化 (Currying)

柯里化是将接收多个参数的函数变换为接收单一参数并返回一个新函数，以待后续参数的技术。它能实现函数的“预加载”，常用于配置复用。

第3步：实现简单的柯里化

动作：将二元加法转换为链式调用。

// 普通二元函数
const add = (x, y) => x + y;

// 柯里化后的一元函数序列
const curryingAdd = x => y => x + y;

const add2 = curryingAdd(2); // 预先绑定第一个参数
const add3 = curryingAdd(3);
console.log(add2(1), add3(1)); // 输出: 3, 4

然而，深层嵌套的柯里化函数（像包心菜一样层层包裹）会降低可读性。为解决这一问题，引入了组合函数 (Compose)。

函数组合 (Compose)

Compose 允许我们将多个单参数函数组合成一个复杂函数，从右向左依次执行（或在库实现中从左向右，取决于约定，以下采用数学定义中的从右向左执行习惯）。

第4步：使用 Compose 替代嵌套

操作：构建无嵌套调用的函数管道。

// compose(f1, f2)(x) 等价于 f1(f2(x))
const compose = (f1, f2) => x => f1(f2(x));

const add2 = x => x + 2;
const mult5 = x => x * 5;

// 先加2再乘5
console.log(compose(mult5, add2)(2)); // 输出: 14 ((2+2)*5)

场景案例：获取数组最后元素

挑战：在不明确数组长度的情况下，安全地获取最后一个元素。常规做法可能是倒置数组取值，但需小心保留数据完整性。

第5步：运用组合函数简化逻辑

结果：构建一个清晰的操作流水线。

// 常规写法（可能会破坏原数组，需注意副作用）
function getLastConventional(arr) {
  return arr.reverse()[0];
}

// 使用 Compose 风格拆分逻辑：1.反转数组 2.取第一项
const reverseArr = arr => [...arr].reverse(); // 注意：此处使用展开运算符复制副本以符合纯函数原则，原文 splice/slice 类比同理
const getFirstFromArray = arr => arr[0];

const pipeline = compose(getFirstFromArray, reverseArr);
console.log(pipeline([1, 2, 3, 4, 5])); // 输出: 5

注：在实际纯函数实践中，应避免修改原数组。上述案例中 reverseArr 使用了展开语法生成新数组，从而满足纯函数要求。

总结

JavaScript 函数式编程的核心优势在于代码的稳定性与独立性，这极大提升了单元测试的便利性和 Tree Shaking 的效果。掌握以下三点即可入门：

1. 坚守纯函数：确保相同的输入永远产生相同的输出，拒绝隐式副作用。
2. 善用柯里化：通过预设参数提高函数的复用率和配置能力。
3. 拥抱组合：利用 Compose 将简单函数组装成复杂的业务逻辑，保持代码整洁。

以上就是关于 JavaScript 函数式编程示例分析的详细内容，更多关于 JS 函数式编程技巧的资料请关注本站其它相关文章！