作为一名 JavaScript 开发者，你是否曾经遇到过这样的情况：在代码中调用了一个函数，结果却发现全局变量被莫名其妙地修改了，或者相同的输入在不同时间竟然得到了不同的结果？这些令人头疼的问题，通常都是由“非纯函数”引起的。
在构建现代 Web 应用程序时，随着业务逻辑的日益复杂，如何保证代码的稳定性、可测试性和可维护性成为了我们面临的主要挑战。在这篇文章中，我们将深入探讨一个能够有效解决上述问题的核心概念——纯函数。我们将一起探索它的定义、核心特性，以及为什么它被认为是构建可靠应用程序的基石。
通过本文，你将学会如何辨别代码中的纯与非纯，掌握编写纯函数的实用技巧，并理解为什么像 Redux 这样的库以及函数式编程范式如此推崇它。让我们开始这段通往更高质量代码的旅程吧。
什么是纯函数？
简单来说，纯函数是一个代码块（或函数），它就像一个数学公式：只要传入相同的参数，它就总是返回相同的结果。它的行为完全由其输入决定，不受任何外部因素的影响。
为了让你更直观地理解，我们可以先看一个最简单的例子：
// 这是一个纯函数的示例
function add(a, b) {
// 返回 a 和 b 的和，仅依赖于输入 a 和 b
return a + b;
}
// 无论我们在代码的哪个地方调用，也无论调用多少次
// 只要输入是 2 和 3，输出永远都是 5
console.log(add(2, 3)); // 输出: 5
console.log(add(2, 3)); // 输出: 5
``
在这个 `add` 函数中，没有任何“隐藏”的逻辑。它不依赖外部变量，也不修改外部环境，这就是纯函数的精髓所在。
### 纯函数的三大核心特征
要在实际开发中编写出纯函数，我们需要牢记以下三个核心特征。这些特征不仅是判断标准，更是我们在编写代码时的指导原则。
#### 1. 确定的输出
对于给定的一组输入，纯函数的输出必须始终是相同的。这意味着函数内部不能包含任何随机性逻辑，也不能依赖于随时间变化的状态。
* **反面教材**：`Math.random()` 或 `new Date()`。如果你在函数内部直接调用 `Math.random()`，那么它对于相同的输入（甚至没有输入）每次都会返回不同的值，这就破坏了纯函数的定义。
* **正面实践**：如果需要随机数或时间，应该将它们作为参数传入函数。这样，函数本身依然是纯的，因为它只处理给定的数据。
#### 2. 无副作用
这是纯函数概念中最为关键的一点。所谓的“副作用”，是指函数在执行过程中对外部环境造成了影响。具体来说，纯函数不会：
* 修改传入的参数对象（不要修改引用类型的参数）。
* * 修改全局变量。
* 进行网络请求。
* 操作 DOM（如修改页面元素）。
* 写入数据库或文件系统。
* 使用 `console.log`（虽然这通常用于调试，但严格来说它属于 I/O 操作）。
#### 3. 不可变性
纯函数通常遵循不可变性原则。这意味着它们不会改变输入值，而是基于输入创建并返回一个新的值或对象。
### 带有副作用的函数行为：反例解析
为了加深理解，让我们来看看反面教材。在下面的例子中，`increment` 函数就不是一个纯函数，因为它修改了外部变量 `count`。
javascript
// 定义一个外部变量
let count = 0;
// 这是一个非纯函数
function increment() {
// 这里产生了副作用：修改了函数外部的变量
count++;
return count;
}
console.log(increment()); // 输出: 1
console.log(increment()); // 输出: 2
// 你看，虽然我们没有传参数，但结果在变。
// 这是因为函数依赖了外部状态，导致我们无法仅凭函数调用预测结果。
在这个例子中，`increment` 的行为依赖于外部变量 `count` 的当前值。如果我们在代码的其他地方修改了 `count`，`increment` 的结果就会受到影响。这种紧密的耦合使得代码变得脆弱，难以调试。
### 不纯函数：我们需要避免的内容
在实际开发中，不纯函数往往是 Bug 的温床。让我们通过一个更复杂的对象操作例子来看看为什么我们应该避免这种情况。
javascript
// 全局用户对象
let user = { name: "Meeta", age: 25 };
// 这是一个不纯的更新函数
function updateUser(newAge) {
// 直接修改了传入的全局对象引用
user.age = newAge;
return user;
}
console.log("更新前:", user); // { name: ‘Meeta‘, age: 25 }
updateUser(26);
console.log("更新后:", user); // { name: ‘Meeta‘, age: 26 }
// 问题：原始的 user 对象被改变了。
// 如果程序的其他部分依赖于旧的用户数据，这里就会引发逻辑错误。
**这种做法的问题在于：**
1. **数据丢失**：我们丢失了用户原本 25 岁的状态信息。
2. **隐蔽的依赖**：`updateUser` 函数强依赖于全局 `user` 变量。如果我们想在不同用户之间复用这个逻辑，就必须重写函数。
3. **难以测试**：为了测试这个函数，我们必须先设置好全局的 `user` 状态，测试之间还会互相干扰。
### 如何编写纯函数：最佳实践
那么，我们该如何改造上面的代码，使其变成纯函数呢？关键在于**不要修改原对象，而是返回一个新对象**。
#### 示例 1：对象更新的纯函数实现
我们可以使用 ES6 的扩展运算符（Spread Operator）来轻松实现这一点。
javascript
// 现在我们不再依赖全局变量，而是将用户数据作为参数传入
function updateUserPure(user, newAge) {
// 我们创建了一个全新的对象，复制了 user 的原有属性
// 并覆盖了 age 属性
// 注意：原始的 user 对象完全没有被触碰
return { …user, age: newAge };
}
const originalUser = { name: "Meeta", age: 25 };
// 调用纯函数，并传入新状态
const newUser = updateUserPure(originalUser, 26);
console.log("原始用户数据:", originalUser);
// 输出: { name: ‘Meeta‘, age: 25 } (保持不变!)
console.log("新用户数据:", newUser);
// 输出: { name: ‘Meeta‘, age: 26 }
在这个版本中，`originalUser` 保持了完整和独立。`updateUserPure` 函数不仅更加可靠，而且可以在任何地方对任何用户对象进行复用，没有任何副作用。
#### 示例 2：数组操作的纯函数实现
在 JavaScript 中，数组操作是副作用的“重灾区”。我们需要区分“变异方法”和“非变异方法”。
* **变异方法（不纯）**：`push`, `pop`, `splice`, `sort`。这些方法会直接修改原数组。
* **非变异方法（通常用于纯函数）**：`map`, `filter`, `reduce`, `slice`。这些方法返回新数组，不修改原数组。
让我们看看如何用纯函数的方式添加元素：
javascript
// 不纯的做法：使用 push
const numbers = [1, 2, 3];
function addItemImpure(arr, item) {
arr.push(item); // 直接修改了 arr
return arr;
}
addItemImpure(numbers, 4);
console.log(numbers); // [1, 2, 3, 4] -> 原数组被污染了
// — 分割线 —
// 纯函数的做法：使用扩展运算符或 concat
const originalNumbers = [1, 2, 3];
function addItemPure(arr, item) {
// 返回一个包含原元素和新元素的新数组
return […arr, item];
}
const newNumbers = addItemPure(originalNumbers, 4);
console.log("原数组:", originalNumbers); // [1, 2, 3] (保持不变)
console.log("新数组:", newNumbers); // [1, 2, 3, 4]
### 纯函数的实际应用场景
理解了原理之后，让我们看看在真实的开发场景中，纯函数是如何发挥威力的。
#### 1. 数据转换管道
当我们处理从 API 获取的数据时，通常需要经过一系列的转换（过滤、映射、排序）。使用纯函数可以让我们像搭积木一样组合这些操作。
javascript
const rawProducts = [
{ id: 1, name: "Laptop", price: 1000, inStock: true },
{ id: 2, name: "Mouse", price: 20, inStock: false },
{ id: 3, name: "Keyboard", price: 50, inStock: true }
];
// 纯函数 1: 筛选有库存的商品
function filterInStock(products) {
return products.filter(product => product.inStock);
}
// 纯函数 2: 应用折扣
function applyDiscount(products, discountRate) {
return products.map(product => ({
…product,
price: product.price * (1 – discountRate)
}));
}
// 组合使用
const discountRate = 0.1; // 10% 折扣
const finalProducts = applyDiscount(filterInStock(rawProducts), discountRate);
console.log(finalProducts);
// 输出包含 Laptop 和 Keyboard 的数组，且价格已更新
// rawProducts 数据依然完好无损
#### 2. React 和 Redux 中的状态管理
如果你使用过 React 或 Redux，你一定知道“State（状态）”是只读的。在 Redux 中，Reducer 必须是纯函数。这是因为 Redux 需要通过对比新旧状态的引用来确定是否需要重新渲染页面。
如果你的 Reducer 是一个直接修改 state 的函数，React 就无法察觉变化，导致页面不更新或者状态混乱。这就是为什么纯函数在状态管理中处于核心地位的原因。
#### 3. 单元测试
单元测试是纯函数最大的受益者之一。因为纯函数的结果只依赖于输入，我们在编写测试时不需要：
1. 模拟复杂的全局环境。
2. 重置数据库状态。
3. 担心测试执行的先后顺序。
我们只需要简单地断言：输入 A，预期输出 B。
javascript
// 测试非常简单
test(‘updateUserPure should return new user with updated age‘, () => {
const input = { name: ‘Tom‘, age: 20 };
const result = updateUserPure(input, 21);
expect(result.age).toBe(21);
expect(input.age).toBe(20); // 验证原数据未被修改
});
#### 4. 性能优化：记忆化
因为纯函数对于相同的输入总是返回相同的输出，我们可以利用这一特性进行“记忆化”。我们可以将函数的计算结果缓存起来。下次遇到相同的输入时，直接返回缓存的结果，而无需重新计算。
javascript
// 一个简单的记忆化实现示例
function memoize(fn) {
const cache = {};
return function(…args) {
const key = JSON.stringify(args);
if (cache[key]) {
console.log("从缓存中读取");
return cache[key];
}
console.log("执行计算");
const result = fn.apply(this, args);
cache[key] = result;
return result;
};
}
// 这是一个计算密集型的纯函数
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n – 1) + fibonacci(n – 2);
}
const memoizedFib = memoize(fibonacci);
console.log(memoizedFib(40)); // 第一次会执行很久
console.log(memoizedFib(40)); // 第二次瞬间返回，因为结果来自缓存
“INLINECODE37b37381fibonacciINLINECODE4a6593bbObject.assign({}, …)INLINECODE899cb249{…obj}INLINECODEaf95bf45lodash.cloneDeepINLINECODEe7c1a247console.logINLINECODE90e21793fetch` 来获取数据。UI 交互本质上就是副作用的。
解决方案：遵循“核心纯，边缘不纯”的原则。将业务逻辑、数据计算、状态转换部分编写成纯函数，而在程序的最外层（如控制器、事件监听器）去处理副作用。
总结与关键要点
在这篇文章中，我们深入探讨了 JavaScript 纯函数的世界。我们可以看到，纯函数不仅仅是一个学术概念，它是编写高质量、可维护代码的实用工具。
让我们回顾一下关键要点：
- 确定性：相同的输入永远得到相同的输出，这是可预测性的保证。
- 无副作用：不修改外部状态，不依赖外部变量，让代码更加独立和安全。
- 不可变性：通过返回新对象而不是修改旧对象，来保护数据的一致性。
- 可测试性：纯函数让单元测试变得简单、快速且可靠。
- 可缓存性：纯函数是性能优化的最佳候选人，便于实现记忆化。
虽然将所有代码都转换为纯函数可能需要一些思维上的转变，但收益是巨大的。从今天开始，尝试在编写数据转换逻辑或状态更新逻辑时，问自己一个问题：“这个函数是纯的吗？” 养成这个习惯，你会发现你的代码变得更加健壮，Bug 变得更少，重构也变得更加自信。
下一步，建议你在阅读开源项目代码时，留意作者是如何处理状态和数据的，尝试识别其中的纯函数与非纯函数，并思考如果是你，会如何优化。祝你编码愉快！