干净的代码：使用函数式编程管理副作用-js教程-PHP中文网

Clean Code: Managing Side Effects with Functional Programming

副作用会使代码变得不可预测且难以维护。让我们探讨一下函数式编程如何帮助我们有效地处理它们。

什么是副作用？

如果函数除了接受输入和返回输出之外还执行任何其他操作，则会产生副作用。一些常见的副作用包括：

更改全局变量
修改输入参数
写入文件或数据库
进行 API 调用
更新 DOM
登录控制台

为什么副作用会导致问题

这是一个显示有问题的副作用的示例：

let userProfile = {
  name: "Alice Johnson",
  email: "alice@example.com",
  preferences: {
    theme: "dark",
    notifications: true
  }
};

function updateUserTheme(newTheme) {
  userProfile.preferences.theme = newTheme;
}

function toggleNotifications() {
  userProfile.preferences.notifications = !userProfile.preferences.notifications;
}

// Multiple functions modifying the same global state
updateUserTheme("light");
toggleNotifications();

console.log(userProfile); // State is unpredictable

登录后复制

此代码有几个问题：

它使用全局状态
多个函数可以更改相同的数据
变化变得难以追踪
测试变得复杂

纯函数的更好解决方案

这是使用函数式编程原理的改进版本：

const createUserProfile = (name, email, theme, notifications) => ({
  name,
  email,
  preferences: {
    theme,
    notifications
  }
});

const updateTheme = (profile, newTheme) => ({
  ...profile,
  preferences: {
    ...profile.preferences,
    theme: newTheme
  }
});

const toggleNotifications = (profile) => ({
  ...profile,
  preferences: {
    ...profile.preferences,
    notifications: !profile.preferences.notifications
  }
});

// Usage
const initialProfile = createUserProfile(
  "Alice Johnson",
  "alice@example.com",
  "dark",
  true
);

const updatedProfile = updateTheme(initialProfile, "light");
const finalProfile = toggleNotifications(updatedProfile);

console.log(initialProfile); // Original state unchanged
console.log(finalProfile);   // New state with updates

登录后复制

实例：文件操作

以下是如何使用函数式编程处理文件操作中必要的副作用：

// Separate pure business logic from side effects
const createUserData = (user) => ({
  id: user.id,
  name: user.name,
  createdAt: new Date().toISOString()
});

const createLogEntry = (error) => ({
  message: error.message,
  timestamp: new Date().toISOString(),
  stack: error.stack
});

// Side effect handlers (kept at the edges of the application)
const writeFile = async (filename, data) => {
  const serializedData = JSON.stringify(data);
  await fs.promises.writeFile(filename, serializedData);
  return data;
};

const appendFile = async (filename, content) => {
  await fs.promises.appendFile(filename, content);
  return content;
};

// Usage with composition
const saveUser = async (user) => {
  const userData = createUserData(user);
  return writeFile('users.json', userData);
};

const logError = async (error) => {
  const logData = createLogEntry(error);
  return appendFile('error.log', JSON.stringify(logData) + '\n');
};

登录后复制

使用函数式编程处理副作用

纯函数

   // Pure function - same input always gives same output
   const calculateTotal = (items) => 
     items.reduce((sum, item) => sum + item.price, 0);

   // Side effect wrapped in a handler function
   const processPurchase = async (items) => {
     const total = calculateTotal(items);
     await saveToDatabase(total);
     return total;
   };

登录后复制

函数组合

   const pipe = (...fns) => (x) => 
     fns.reduce((v, f) => f(v), x);

   const processUser = pipe(
     validateUser,
     normalizeData,
     saveUser
   );

登录后复制

数据转换

   const transformData = (data) => {
     const addTimestamp = (item) => ({
       ...item,
       timestamp: new Date().toISOString()
     });

     const normalize = (item) => ({
       ...item,
       name: item.name.toLowerCase()
     });

     return data
       .map(addTimestamp)
       .map(normalize);
   };

登录后复制

测试纯函数

使用纯函数测试变得更加简单：

describe('User Profile Functions', () => {
  const initialProfile = createUserProfile(
    'Alice',
    'alice@example.com',
    'dark',
    true
  );

  test('updateTheme returns new profile with updated theme', () => {
    const newProfile = updateTheme(initialProfile, 'light');

    expect(newProfile).not.toBe(initialProfile);
    expect(newProfile.preferences.theme).toBe('light');
    expect(initialProfile.preferences.theme).toBe('dark');
  });

  test('toggleNotifications flips the notifications setting', () => {
    const newProfile = toggleNotifications(initialProfile);

    expect(newProfile.preferences.notifications).toBe(false);
    expect(initialProfile.preferences.notifications).toBe(true);
  });
});

登录后复制