前端开发中：使用纯函数提纯非纯函数

前端

2023-11-18 19:22:24

纯函数与非纯函数：提升前端代码质量的关键

前言

在前端开发中，代码的清晰度、可测试性和可维护性至关重要。掌握纯函数和非纯函数的概念是迈向这些目标的关键一步。本文将深入探讨这两种函数类型，并展示如何使用纯函数提纯非纯函数，从而显著提升代码质量。

纯函数与非纯函数

纯函数

不修改外部状态或依赖外部变量。
给定相同的输入，始终产生相同的输出。
没有副作用（如打印日志或发起网络请求）。

非纯函数

可能修改外部状态或依赖外部变量。
对于相同的输入，可能产生不同的输出。
可能有副作用。

BMI 计算器示例

为了理解纯函数和非纯函数，让我们考虑一个计算体重指数（BMI）的函数：

const bmiCalculator = (weight, height) => {
  // 获取当前时间戳（模拟外部状态）
  const timestamp = new Date().getTime();

  // 输出日志（副作用）
  console.log(`BMI calculation started at ${timestamp}`);

  // 计算 BMI
  const bmi = weight / (height * height);

  // 输出结果和时间戳（副作用）
  console.log(`BMI: ${bmi} (calculated at ${timestamp})`);

  // 返回 BMI
  return bmi;
};

此函数是非纯函数 ，因为它：

依赖于外部状态（当前时间戳）。
对于相同的输入（体重和身高），可能会产生不同的输出（由于时间戳不同）。
有副作用（输出日志）。

使用纯函数提纯

我们可以使用纯函数将非纯函数的计算逻辑提纯出来：

// 纯函数，计算 BMI
const calculateBMI = (weight, height) => {
  return weight / (height * height);
};

// 非纯函数，获取当前时间戳
const getCurrentTimestamp = () => {
  return new Date().getTime();
};

// 非纯函数，输出日志
const logBMI = (bmi, timestamp) => {
  console.log(`BMI: ${bmi} (calculated at ${timestamp})`);
};

// 使用纯函数提纯非纯函数
const bmiCalculator = (weight, height) => {
  // 获取当前时间戳（副作用）
  const timestamp = getCurrentTimestamp();

  // 输出日志（副作用）
  logBMI(calculateBMI(weight, height), timestamp);

  // 返回 BMI
  return calculateBMI(weight, height);
};