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

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

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

什么是高阶函数?

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

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

JavaScript中的 mapfilterreduce 就是典型的高阶函数,它们接收函数作为参数来处理数组数据。

常用高阶函数的实际应用

这些方法广泛应用于数据处理场景,比如从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的用户:

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

基本上就这些。掌握高阶函数的关键在于理解函数作为“一等公民”可以像数据一样传递和操作。合理使用它们,能让代码更声明式、更少副作用,真正体现函数式编程的优势。不复杂但容易忽略。