JS高阶函数示例

在JS中，函数可以被视为一等公民。这意味着函数和其他任何对象一样可以被创建、分配和传递。高阶函数则是利用这种特性来提高代码可复用性和灵活性的函数。

什么是高阶函数？

高阶函数简单来说就是“函数作为参数”和“函数作为返回值”的函数。在这种函数中，参数列表中至少有一个函数，并且它返回另一个函数。

高阶函数的优点

• 简化代码，提高灵活性。
• 可以轻松地实现回调机制。
• 可以轻松地实现函数组合。
• 实现拦截器、过滤器等极为方便。

高阶函数的常见用法

1. 数组操作

JavaScript中的数组方法大量使用了高阶函数的概念，比如map、filter、reduce等。

const arr = [1, 2, 3, 4, 5];
const doubleArr = arr.map(num => num * 2);
// doubleArr: [2, 4, 6, 8, 10]

const evenArr = arr.filter(num => num % 2 === 0);
// evenArr: [2, 4]

const sum = arr.reduce((acc, cur) => acc + cur);
// sum: 15

2. 函数装饰器

函数装饰器是一种将现有函数作为输入，并返回另一个函数的函数。函数装饰器经常用于修改或增强现有函数的行为，比如添加日志、性能监控、验证等。

function logger(fn) {
  return function(x) {
    console.log(`[${new Date().toISOString()}] start: ${fn.name}`);
    const result = fn(x);
    console.log(`[${new Date().toISOString()}] end: ${fn.name}`);
    return result;
  }
}

function add(x) {
  return x + x;
}

const loggedAdd = logger(add);
console.log(loggedAdd(5)); // [2021-12-29T06:54:00.857Z] start: add  [2021-12-29T06:54:00.863Z] end: add  10

3. 函数柯里化

函数柯里化是一种将一个函数拆分成多个参数的技术。一个n参数函数可以通过柯里化转化为n个一参数函数的组合。柯里化经常用于参数复杂且数量很多的函数。

function add(x, y, z) {
  return x + y + z;
}

// 不使用柯里化，需要传入3个参数
console.log(add(1, 2, 3)); // 6

// 使用柯里化，传入1个参数返回一个新函数
function curriedAdd(x) {
  return function(y) {
    return function(z) {
      return x + y + z;
    };
  };
}

console.log(curriedAdd(1)(2)(3)); // 6

小结

高阶函数是一种利用JavaScript中函数作为一等公民的特性提高代码可复用性和灵活性的函数，常用于数组操作、函数装饰器、函数柯里化等场景。高阶函数虽然有很多好处，但也需要谨慎使用，避免代码不易理解和维护。