JavaScript 纯函数

在学习JavaScript函数的过程中，你可能会听到"纯函数"这个术语。纯函数是函数式编程的核心概念之一，了解并掌握纯函数能够帮助你写出更加可靠、可测试和可维护的代码。本文将全面介绍纯函数的概念、特点、优势以及实际应用。

什么是纯函数？

纯函数是这样一种函数：

给定相同的输入，总是返回相同的输出
没有副作用（Side Effects）

这两个特性看似简单，但实际上蕴含着深刻的含义，它们使得纯函数在编程中具有极高的价值。

特性一：相同输入，相同输出

这意味着函数的返回结果仅取决于其参数，而不依赖于任何外部状态或数据。这种特性被称为引用透明性（Referential Transparency）。

来看一个简单的例子：

// 纯函数
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 输出: 5
console.log(add(2, 3)); // 输出: 5

无论何时调用add(2, 3)，结果总是5，这就是引用透明的体现。

特性二：没有副作用

副作用指的是函数除了返回值之外，还对外部环境产生了其他影响，例如：

修改全局变量或外部作用域中的变量
修改函数参数
执行I/O操作（如网络请求、文件读写等）
调用浏览器API（如console.log、alert等）
DOM操作

纯函数应避免这些行为。

纯函数 vs 非纯函数

来看几个例子来区分纯函数和非纯函数：

纯函数示例

// 纯函数示例1: 计算圆的面积
function calculateCircleArea(radius) {
  return Math.PI * radius * radius;
}

// 纯函数示例2: 将数组中的每个元素翻倍
function doubleNumbers(numbers) {
  return numbers.map(num => num * 2);
}

非纯函数示例

// 非纯函数示例1: 依赖外部变量
let taxRate = 0.1;

function calculateTax(amount) {
  return amount * taxRate; // 依赖外部变量taxRate
}

// 非纯函数示例2: 修改外部状态
let total = 0;

function addToTotal(value) {
  total += value; // 修改外部变量
  return total;
}

// 非纯函数示例3: 修改传入参数
function addItem(cart, item) {
  cart.push(item); // 直接修改了传入的cart参数
  return cart;
}

将非纯函数转换为纯函数

让我们将上面的非纯函数转换为纯函数：

// 将taxRate作为参数传入
function calculateTax(amount, taxRate) {
  return amount * taxRate;
}

// 不修改外部状态，而是返回一个新值
function addToTotal(currentTotal, value) {
  return currentTotal + value;
}

// 不修改原数组，而是返回新数组
function addItem(cart, item) {
  return [...cart, item]; // 使用展开运算符创建新数组
}

纯函数的优势

纯函数具有以下优势：

可预测性：相同的输入总是产生相同的输出，使代码行为更加可预测。
可测试性：因为纯函数不依赖外部状态，测试变得简单直接。
可缓存性：由于相同输入始终产生相同输出，可以缓存函数结果提高性能。
并行处理：纯函数不依赖共享状态，可以安全地并行执行。
易于理解和维护：纯函数的行为更容易预测和理解，减少了bug的可能性。

实际应用场景

1. 数据转换

纯函数非常适合处理数据转换任务：

// 将用户数据转换为显示格式
function formatUser(user) {
  return {
    displayName: `${user.firstName} ${user.lastName}`,
    formattedBirthdate: new Date(user.birthdate).toLocaleDateString(),
    age: calculateAge(user.birthdate)
  };
}

function calculateAge(birthdate) {
  const today = new Date();
  const birth = new Date(birthdate);
  let age = today.getFullYear() - birth.getFullYear();
  const monthDiff = today.getMonth() - birth.getMonth();
  
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
    age--;
  }
  
  return age;
}

2. React中的应用

在React中，纯函数是构建可重用组件的关键。React函数组件应该是纯函数，接收props作为输入并返回渲染结果：

// 纯函数组件
function Greeting({ name, language }) {
  const greetings = {
    english: 'Hello',
    spanish: 'Hola',
    french: 'Bonjour'
  };
  
  const greeting = greetings[language] || greetings.english;
  
  return (
    <div className="greeting">
      {greeting}, {name}!
    </div>
  );
}

3. Redux reducers

Redux要求所有的reducers都是纯函数，这确保了状态更新的可预测性：

// 纯函数reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

纯函数的局限性

尽管纯函数有很多优点，但在实际开发中，我们不可能让所有函数都是纯函数。例如：

I/O操作（如网络请求、文件读写）
获取当前时间、随机数生成
DOM操作
状态管理

在这些情况下，我们通常会将不纯的部分和纯的部分分离，尽量减少不纯函数的范围，最大化纯函数的使用。

提示

一个好的策略是：将核心业务逻辑实现为纯函数，将副作用隔离在应用的边缘。

实用技巧：识别和编写纯函数

纯函数的检查清单

函数是否只依赖于输入参数？
函数是否不修改输入参数？
函数是否不依赖/修改全局状态？
函数是否没有副作用（如I/O操作）？

如果全部回答"是"，那么你的函数很可能是纯的。

处理JavaScript中的不可变性

JavaScript的数组和对象默认是可变的，这使得保持函数的纯净变得困难。以下是一些技巧：

// 使用展开运算符创建对象副本
function updateUser(user, updates) {
  return { ...user, ...updates };
}

// 使用Array方法创建新数组而非修改原数组
function removeItem(array, index) {
  return [...array.slice(0, index), ...array.slice(index + 1)];
}

// 使用Object.freeze()防止对象被修改（浅冻结）
const config = Object.freeze({
  apiUrl: 'https://api.example.com',
  timeout: 3000
});

警告

Object.freeze()只是浅冻结，嵌套对象仍然可以被修改。对于深度冻结，需要递归应用Object.freeze()。

练习：识别并重构为纯函数

以下是一些练习，试着识别哪些是纯函数，并将非纯函数重构为纯函数：

// 练习1
function square(x) {
  return x * x;
}

// 练习2
let counter = 0;
function increment() {
  counter++;
  return counter;
}

// 练习3
function processUser(user) {
  user.lastProcessed = new Date();
  return user;
}

// 练习4
function getRandomBetween(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

答案

练习1: 纯函数，给定相同的x总是返回相同的结果，没有副作用。

练习2: 非纯函数，依赖并修改了外部变量。重构：

function increment(counter) {
  return counter + 1;
}

练习3: 非纯函数，修改了输入参数。重构：

function processUser(user) {
  return {
    ...user,
    lastProcessed: new Date()
  };
}

练习4: 非纯函数，Math.random()导致每次调用结果不同。这种情况很难转为纯函数，但可以将随机性作为参数注入：

function getRandomBetween(min, max, randomValue) {
  return Math.floor(randomValue * (max - min + 1)) + min;
}
// 使用: getRandomBetween(1, 10, Math.random());

总结

纯函数是一种特殊的函数，它对相同的输入总是返回相同的输出，并且不产生副作用。通过编写和使用纯函数，我们可以使代码更加可预测、可测试、可维护，并且减少bug的产生。

尽管在实际开发中，我们无法避免所有的副作用，但应尽量将核心业务逻辑实现为纯函数，将副作用限制在应用的边缘。这种编程风格是函数式编程的核心理念之一，已被证明可以提高代码质量和开发效率。

进一步学习

学习更多函数式编程概念，如：不可变性、高阶函数、柯里化等
探索JavaScript中的函数式编程库，如Ramda、Lodash/fp
研究React、Redux等库中的函数式编程应用

练习题

编写一个纯函数deepFreeze，用于深度冻结一个对象（包括嵌套对象）。

重构下面的函数使其成为纯函数：

let items = [];
function addItemToCart(item) {
  items.push(item);
  return `Added ${item.name} to cart. Cart now has ${items.length} items.`;
}

编写一个纯函数，接收一个学生成绩数组，返回一个对象，包含最高分、最低分、平均分。

通过这些练习，你将更加熟练地应用纯函数的概念，并将其融入到你的日常编程实践中。

什么是纯函数？​

特性一：相同输入，相同输出​

特性二：没有副作用​

纯函数 vs 非纯函数​

纯函数示例​

非纯函数示例​

将非纯函数转换为纯函数​

纯函数的优势​

实际应用场景​

1. 数据转换​

2. React中的应用​

3. Redux reducers​

纯函数的局限性​

实用技巧：识别和编写纯函数​

纯函数的检查清单​

处理JavaScript中的不可变性​

练习：识别并重构为纯函数​

总结​

进一步学习​

练习题​