跳转到内容

JavaScript纯函数

来自代码酷

JavaScript纯函数[编辑 | 编辑源代码]

纯函数(Pure Function)是函数式编程中的核心概念之一,也是编写可预测、可维护代码的重要原则。在JavaScript中,纯函数具有以下两个关键特性:

1. 相同的输入始终返回相同的输出(确定性) 2. 不产生副作用(不会修改外部状态)

特性详解[编辑 | 编辑源代码]

1. 确定性[编辑 | 编辑源代码]

纯函数在给定相同输入时,总是返回相同的结果,不受外部状态影响。数学函数就是典型的纯函数,例如:

// 纯函数示例
function square(x) {
    return x * x;
}

console.log(square(5)); // 输出: 25 (无论调用多少次,结果都相同)

2. 无副作用[编辑 | 编辑源代码]

纯函数不会修改任何外部状态,包括:

  • 不修改传入的参数
  • 不修改全局变量
  • 不进行I/O操作(如网络请求、文件读写)
  • 不调用非纯函数(如`Math.random()`或`Date.now()`)
// 非纯函数示例(有副作用)
let counter = 0;
function increment() {
    counter++; // 修改了外部变量
    return counter;
}

// 纯函数版本
function pureIncrement(num) {
    return num + 1; // 不修改外部状态
}

纯函数 vs 非纯函数[编辑 | 编辑源代码]

flowchart LR A[函数] --> B[纯函数] A --> C[非纯函数] B --> D[确定性] B --> E[无副作用] C --> F[可能依赖外部状态] C --> G[可能有副作用]

实际应用案例[编辑 | 编辑源代码]

1. 数据处理[编辑 | 编辑源代码]

纯函数非常适合数据转换场景:

// 购物车价格计算(纯函数实现)
function calculateTotal(cartItems) {
    return cartItems.reduce((total, item) => {
        return total + (item.price * item.quantity);
    }, 0);
}

const cart = [
    { name: "Book", price: 10, quantity: 2 },
    { name: "Pen", price: 2, quantity: 5 }
];

console.log(calculateTotal(cart)); // 输出: 30

2. React组件[编辑 | 编辑源代码]

React推崇使用纯函数组件:

// React纯函数组件
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

数学表示[编辑 | 编辑源代码]

纯函数可以用数学函数表示: f(x)=y 其中:

  • x 是输入
  • y 是输出
  • 对于相同的 x,总是得到相同的 y

优点[编辑 | 编辑源代码]

  • 可预测性:结果只依赖输入,易于推理
  • 可测试性:不需要复杂的环境设置
  • 可缓存性:可以记忆化(memoize)结果
  • 并行安全:无共享状态,可安全并行执行

注意事项[编辑 | 编辑源代码]

虽然纯函数有很多优点,但在实际开发中: 1. 应用不可能完全由纯函数组成(需要I/O等副作用) 2. 合理组合纯函数和非纯函数 3. 将副作用限制在可控范围内

练习示例[编辑 | 编辑源代码]

将以下非纯函数转换为纯函数:

// 原始版本(非纯)
let discount = 0.1;
function applyDiscount(price) {
    return price * (1 - discount);
}

// 纯函数版本
function pureApplyDiscount(price, discountRate) {
    return price * (1 - discountRate);
}

总结[编辑 | 编辑源代码]

纯函数是JavaScript函数式编程的基石,它们通过限制副作用和提高确定性使代码更可靠。虽然实际应用中需要与非纯函数配合使用,但尽可能多地使用纯函数能显著提高代码质量。