玩转 JavaScript 高阶函数

高阶函数听起来可能比较陌生，但是大家所熟知的回调函数、数组 map 方法等都属于高阶函数，具体怎么使用呢？请看下面。

1. 什么是高阶函数？

高阶函数（Higher-Order Functions）是指至少满足以下两个条件之一的函数：

1、函数作为参数传递给另一个函数：即函数可以接收其他函数作为参数。

2、函数作为返回值返回：即函数可以返回另一个函数。

高阶函数是 JavaScript 函数式编程的核心概念，应用于回调函数、事件处理、数组操作、装饰器等场景。

2. 如何编写一个高阶函数？

有两种常见的高阶函数写法：

1、接收函数作为参数

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
} // 使用方式
repeat(3, console.log); // 输出 0, 1, 2

在这个例子中，repeat 是一个高阶函数，接收另一个函数作为参数并在内部调用它。

2、返回一个函数

function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

const triple = createMultiplier(3);
console.log(triple(5)); // 15

在这个例子中，createMultiplier 是一个高阶函数，返回了一个新的函数。

3. 使用场景

3.1 回调函数

回调函数是高阶函数最常见的使用场景之一。比如，setTimeout 函数就是一个高阶函数，因为它接收了一个回调函数作为参数。

举个 🌰

function fetchData(callback) {
  setTimeout(() => {
    const data = { user: 'Alice' };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data.user); // 输出: Alice
});

3.2 数组操作方法

JavaScript 数组的内置方法如 map、filter、reduce 等，都是高阶函数。

举个 🌰

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

3.3 函数组合

高阶函数可以用来组合多个函数，以实现比较复杂的逻辑。

举个 🌰

function compose(f, g) {
  return function (x) {
    return f(g(x));
  };
}

const add1 = (x) => x + 1;
const square = (x) => x * x;

const add1AndSquare = compose(square, add1);
console.log(add1AndSquare(2)); // 输出 9 (即 (2 + 1)²)，先 + 1，再 square

3.4 装饰器模型 

在需要为函数添加额外功能或修改函数行为时，可以使用装饰器模式。高阶函数可以用来创建装饰器，为函数添加额外的功能。 

举个 🌰

function withLogging(fn) {
  return function (...args) {
    console.log('Arguments:', args);
    const result = fn(...args);
    console.log('Result:', result);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const addWithLogging = withLogging(add);
addWithLogging(2, 3); // 输出: Arguments: [2, 3] Result: 5

withLogging 函数是一个装饰器，它为原始函数 add 添加了日志记录功能。addWithLogging 函数是带有日志记录功能的 add 函数。

3.5 函数科里化

当需要分阶段地提供函数参数时，可以使用柯里化。柯里化是一种将多参数函数转化为一系列一参数函数的技术。

举个 🌰

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 输出: 10

const triple = multiply(3);
console.log(triple(5)); // 输出: 15

4. 注意事项

1、闭包问题

高阶函数在返回一个新函数时，通常会涉及到闭包。需要注意闭包可能会导致内存泄漏，如果捕获的变量未正确释放可能会导致性能问题。

想要了解闭包相关知识 --> 揭秘面试官常见问题 —— JavaScript 闭包-CSDN博客

2、参数传递

确保传递给高阶函数的参数是函数或正确的值类型。传递 undefined 或其他非函数类型可能会导致运行时错误。

3、调试困难

高阶函数的逻辑可能比较复杂，尤其是当多个高阶函数嵌套使用时，调试可能会变得困难。适当的注释和分解复杂函数可以提高代码的可读性和可维护性。

举个 🌰

const result = arr.map(fn1).filter(fn2).reduce(fn3, initialValue);

这个链式调用虽然简洁，但可能掩盖了每一步的逻辑，导致调试困难。

建议：

1）适当使用命名函数而不是匿名函数，增强代码的可读性。

2）在复杂链式调用中，使用中间变量保存中间结果，便于调试。

4、性能问题

高阶函数可能导致性能问题，特别是在处理大量数据时。例如，map、filter、reduce 等操作都是对数组进行多次遍历，如果链式调用多个高阶函数，可能导致性能瓶颈。

解决方法：

1）考虑合并操作，将多个遍历操作合并为一次。

2）使用惰性求值技术，避免不必要的计算。