函数式编程_JS高阶函数应用

技术教程
2025-11-19 12:34:02

高阶函数是能接收或返回函数的函数，如map、filter、reduce，用于数据转换、筛选和累积计算，提升代码复用性与可读性。

函数式编程_js高阶函数应用

函数式编程在J*aScript中越来越受欢迎，主要因为它强调纯函数、不可变数据和函数的组合性。而高阶函数是函数式编程的核心概念之一——它指的是那些能接收函数作为参数，或返回函数的函数。通过合理使用JS中的高阶函数，可以让代码更简洁、可读性更强，也更容易测试和维护。

什么是高阶函数？

高阶函数满足以下任一条件：

接受一个或多个函数作为参数
返回一个函数

J*aScript中的 map、filter、reduce 就是典型的高阶函数，它们接收函数作为参数来处理数组数据。

常用高阶函数的实际应用

这些方法广泛应用于数据处理场景，比如从API获取的原始数据转换为前端需要的格式。

1. map：转换数组元素

map 方法对数组每个元素执行一个函数，并返回新数组。常用于数据结构转换。

例如，将用户ID列表转换为用户对象：

const ids = [1, 2, 3];
const users = ids.map(id => ({ id, name: `User ${id}` }));
// [{id: 1, name: "User 1"}, ...]

2. filter：筛选符合条件的数据

filter 返回满足条件的新数组，适合做数据过滤。

比如筛选出年龄大于18的用户：

S-CMS企业建站系统(含APP/小程序)5.0 build20250614

闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。

0 查看详情 S-CMS企业建站系统(含APP/小程序)5.0 build20230614

const people = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 17 }
];
const adults = people.filter(p => p.age > 18);
// [{ name: 'Alice', age: 20 }]

3. reduce：累积计算结果

reduce 可以将数组“归约”为一个值，适用于求和、分组、扁平化等操作。

例如统计订单总价：

const orders = [
  { amount: 100 },
  { amount: 200 }
];
const total = orders.reduce((sum, order) => sum + order.amount, 0);
// 300

自定义高阶函数提升复用性

除了内置方法，我们也可以编写自己的高阶函数来抽象通用逻辑。

比如创建一个可以延迟执行的函数：

function delay(fn, wait) {
  return function(...args) {
    setTimeout(() => fn(...args), wait);
  };
}

const logLater = delay(console.log, 1000);
logLater('Hello'); // 1秒后输出

再比如实现一个简单的柯里化函数：

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      };
    }
  };
}

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
curriedAdd(1)(2)(3); // 6