JavaScript中的函数式编程：纯函数与副作用

描述
纯函数是函数式编程的核心概念，指在相同输入下总是返回相同输出，并且不产生任何可观察副作用的函数。理解纯函数对于编写可预测、可测试的代码至关重要。

详细讲解

1. 纯函数的定义
纯函数需要同时满足两个条件：

• 确定性：相同的输入参数总是产生相同的输出结果
• 无副作用：函数的执行不会修改外部状态或与外部环境交互

示例：纯函数 vs 非纯函数

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

// 非纯函数 - 依赖外部变量
let base = 10;
function addToBase(x) {
    return base + x; // 输出依赖于外部状态base
}

// 非纯函数 - 修改外部状态
let counter = 0;
function increment() {
    counter++; // 修改了外部变量
    return counter;
}

// 非纯函数 - 产生副作用
function logMessage(message) {
    console.log(message); // 控制台输出是副作用
}

2. 副作用的类型
副作用包括但不限于：

• 修改外部变量或对象属性
• 执行I/O操作（控制台输出、网络请求）
• 修改DOM
• 抛出异常
• 调用Math.random()或Date.now()

3. 纯函数的优势

3.1 可缓存性（记忆化）

// 纯函数可以安全缓存
function memoize(fn) {
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

const pureAdd = memoize((a, b) => a + b);
console.log(pureAdd(2, 3)); // 计算并缓存
console.log(pureAdd(2, 3)); // 直接从缓存返回

3.2 可测试性

// 纯函数易于测试
function calculateTax(amount, rate) {
    return amount * rate;
}

// 测试简单直接
console.assert(calculateTax(100, 0.1) === 10);
console.assert(calculateTax(200, 0.2) === 40);

3.3 引用透明性

// 纯函数可以替换为其返回值
const result1 = add(2, 3); // 5
const result2 = 5; // 可以直接替换

// 在代码中可以直接替换
const total = add(2, 3) + add(4, 5); // 可替换为
const total = 5 + 9; // 结果相同

4. 处理副作用的方法

4.1 隔离副作用

// 将副作用隔离到特定函数中
function processUserData(user) {
    // 纯函数部分
    const processed = validateAndTransform(user);
    
    // 副作用集中处理
    saveToDatabase(processed);
    logOperation('user_processed', processed);
}

function validateAndTransform(user) {
    return {
        ...user,
        name: user.name.trim(),
        age: Math.max(0, user.age)
    };
}

4.2 使用函数组合

// 组合纯函数处理数据
const users = [
    { name: '  Alice  ', age: -5 },
    { name: 'Bob  ', age: 25 }
];

// 纯函数组合
const processName = name => name.trim();
const validateAge = age => Math.max(0, age);
const processUser = user => ({
    name: processName(user.name),
    age: validateAge(user.age)
});

const processedUsers = users.map(processUser);

5. 实际应用示例

5.1 数据处理管道

// 构建纯函数数据处理管道
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

// 纯函数组件
const filterActive = users => users.filter(u => u.active);
const mapNames = users => users.map(u => u.name);
const sortAlphabetically = names => names.sort();

// 组合成数据处理管道
const getActiveUserNames = pipe(
    filterActive,
    mapNames,
    sortAlphabetically
);

const users = [
    { name: 'Alice', active: true },
    { name: 'Bob', active: false },
    { name: 'Charlie', active: true }
];

console.log(getActiveUserNames(users)); // ['Alice', 'Charlie']

5.2 状态管理

// 使用纯函数管理状态
const initialState = { count: 0 };

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

// 可预测的状态变化
let state = counterReducer(undefined, {});
console.log(state); // { count: 0 }

state = counterReducer(state, { type: 'INCREMENT' });
console.log(state); // { count: 1 }

6. 实践技巧

6.1 识别和避免副作用

// 不好的写法 - 有副作用
function updateUserProfile(user, updates) {
    Object.assign(user, updates); // 修改了输入参数
    return user;
}

// 好的写法 - 无副作用
function updateUserProfile(user, updates) {
    return { ...user, ...updates }; // 返回新对象
}

6.2 依赖注入处理外部依赖

// 通过依赖注入使函数可测试
function createUserService(logger = console) {
    return {
        createUser: (userData) => {
            // 业务逻辑...
            logger.log('User created'); // 依赖注入的logger
            return { id: 1, ...userData };
        }
    };
}

// 测试时可以注入mock logger
const mockLogger = { log: () => {} };
const userService = createUserService(mockLogger);

纯函数的概念虽然简单，但在实际项目中坚持使用需要良好的设计和规范。通过将副作用隔离到特定区域，可以显著提高代码的可维护性和可靠性。