JS函数式编程中高阶函数和纯函数有哪些实战应用场景

在JavaScript的开发实践中，函数式编程逐渐成为一种被广泛认可的编程范式，而高阶函数和纯函数作为该范式的核心组成部分，能够有效提升代码的复用性、可读性和可维护性。理解它们的实战应用场景，对于开发者写出更优质的代码有重要意义。

核心概念解析

纯函数

纯函数是指满足两个条件的函数：第一，相同的输入一定会得到相同的输出；第二，函数在执行过程中不会产生任何可观察的副作用，比如修改外部变量、发起网络请求、操作DOM等。纯函数的输出完全由输入参数决定，不依赖也不修改外部状态。

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

// 非纯函数示例，依赖外部变量且修改外部状态
let count = 0;
function increment() {
  count++;
  return count;
}

高阶函数

高阶函数是满足以下任一条件的函数：接收一个或多个函数作为参数，或者返回一个函数作为结果。常见的高阶函数包括数组的map、filter、reduce方法，以及用于函数组合、柯里化的工具函数。

// 接收函数作为参数的高阶函数示例
function executeWithLog(fn, ...args) {
  console.log('开始执行函数');
  const result = fn(...args);
  console.log('函数执行结束，结果：', result);
  return result;
}

// 返回函数的高阶函数示例
function createMultiplier(multiplier) {
  return function(num) {
    return num * multiplier;
  };
}
const double = createMultiplier(2);
console.log(double(5)); // 输出10

纯函数的实战应用场景

数据转换与计算

在数据处理的场景中，纯函数非常适合用来做数据的转换和计算，因为它的输出稳定可预测，不会出现意外的修改。比如在前后端数据交互时，对接口返回的数据做格式化处理，就可以使用纯函数实现。

// 格式化用户数据，将接口返回的扁平数据转为前端需要的树形结构
function formatUserList(users) {
  return users.map(user => ({
    id: user.id,
    name: user.username,
    age: user.user_age,
    // 纯函数不会修改原数据，而是返回新的对象
    isAdult: user.user_age >= 18
  }));
}

const rawUsers = [
  { id: 1, username: '张三', user_age: 20 },
  { id: 2, username: '李四', user_age: 16 }
];
const formattedUsers = formatUserList(rawUsers);
console.log(formattedUsers);
// 输出 [{id:1,name:'张三',age:20,isAdult:true},{id:2,name:'李四',age:16,isAdult:false}]

状态管理的reducer实现

在类似Redux的状态管理方案中，reducer必须是一个纯函数，它接收旧的状态和action，返回新的状态，不能直接修改旧状态。这样能保证状态变化的可追溯性，方便调试和状态回滚。

// 计数器reducer示例
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      // 返回新对象，不修改原state
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

let currentState = { count: 0 };
currentState = counterReducer(currentState, { type: 'INCREMENT' });
console.log(currentState.count); // 输出1

高阶函数的实战应用场景

数组数据的批量处理

JavaScript数组内置的map、filter、reduce都是典型的高阶函数，适合用来做数组的批量处理，避免手动写for循环带来的冗余代码。

const scores = [85, 92, 78, 90, 88];

// 使用filter过滤出大于90分的成绩
const highScores = scores.filter(score => score > 90);
console.log(highScores); // 输出 [92, 90]

// 使用map将所有成绩加5分
const addedScores = scores.map(score => score + 5);
console.log(addedScores); // 输出 [90, 97, 83, 95, 93]

// 使用reduce计算总分
const totalScore = scores.reduce((sum, score) => sum + score, 0);
console.log(totalScore); // 输出 433

函数柯里化与参数复用

柯里化是高阶函数的常见应用，它可以将一个多参数函数转换为一系列单参数函数，实现参数的复用，减少重复代码。

// 通用的柯里化函数
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

// 原始的多参数函数
function request(method, url, data) {
  console.log(`发起${method}请求，地址：${url}，数据：`, data);
  // 实际开发中这里会调用fetch或者axios等请求库
}

// 柯里化后生成特定请求方法
const curriedRequest = curry(request);
const get = curriedRequest('GET');
const post = curriedRequest('POST');

// 复用method参数，直接传入url和data
get('https://ipipp.com/api/user', null);
post('https://ipipp.com/api/user', { name: '张三' });

函数组合实现逻辑复用

函数组合也是高阶函数的典型应用，它可以将多个小函数组合成一个大函数，每个小函数只负责单一的逻辑，组合后实现复杂功能，同时保持代码的可测试性。

// 函数组合工具函数，从右到左执行
function compose(...fns) {
  return function(x) {
    return fns.reduceRight((acc, fn) => fn(acc), x);
  };
}

// 单个纯函数逻辑
function trim(str) {
  return str.trim();
}

function toLowerCase(str) {
  return str.toLowerCase();
}

function removeExtraSpaces(str) {
  return str.replace(/s+/g, ' ');
}

// 组合多个函数
const processString = compose(removeExtraSpaces, toLowerCase, trim);

const rawStr = '  Hello   WORLD  ';
const result = processString(rawStr);
console.log(result); // 输出 'hello world'

两者结合的最佳实践

在实际开发中，通常会将高阶函数和纯函数结合使用，用纯函数实现单一的逻辑单元，用高阶函数将这些逻辑单元组合起来，或者批量处理数据。比如在React的函数组件中，用纯函数处理props和状态，用高阶组件（本质是返回组件函数的高阶函数）来复用组件逻辑。

// React函数组件示例，组件本身是纯函数，接收props返回UI
function UserCard(props) {
  return <div className="user-card">
    <h3>{props.name}</h3>
    <p>年龄：{props.age}</p>
  </div>;
}

// 高阶组件，给组件添加加载状态
function withLoading(WrappedComponent) {
  return function WithLoadingComponent(props) {
    if (props.isLoading) {
      return <div>加载中...</div>;
    }
    return <WrappedComponent {...props} />;
  };
}

const UserCardWithLoading = withLoading(UserCard);

通过合理运用高阶函数和纯函数，开发者可以写出更易维护、更易测试、复用性更高的JavaScript代码，这也是函数式编程在实际开发中的核心价值所在。

higher_order_functioncurrycomposeimmutable_data修改时间：2026-06-20 10:57:27