高阶函数

高阶函数（Higher-Order Functions）

高阶函数是指接受函数作为参数或将函数作为返回值的函数。在JavaScript中，函数是一等公民（First-Class Citizens），这意味着函数可以像其他变量一样被传递、返回或存储。高阶函数在函数式编程中非常常见，用于构建更抽象和通用的代码结构。

1. 高阶函数的定义

• 接受函数作为参数：一个函数可以接受另一个函数作为其参数，这个传入的函数可以在函数内部被调用。

• 返回一个函数：一个函数可以返回另一个函数，这个返回的函数可以在外部被调用。

2. 高阶函数的优势

• 代码复用：高阶函数可以抽象出通用的行为，使代码更简洁、更易维护。

• 灵活性：通过传递不同的函数作为参数，高阶函数可以在不同的上下文中执行不同的逻辑，而无需修改高阶函数本身。

• 函数组合：高阶函数允许将简单的函数组合在一起，形成更复杂的操作链，这在处理数据流或事件时尤为强大。

3. 常见的高阶函数

3.1 数组的高阶函数

JavaScript中的数组方法如map、filter、reduce都是高阶函数，它们通过接受回调函数来执行不同的操作。

• Array.prototype.map

  map方法创建一个新数组，其结果是对原数组中的每个元素调用一次提供的函数后的返回值。

  const numbers = [1, 2, 3, 4];
  const doubled = numbers.map(function(number) {
      return number * 2;
  });
  console.log(doubled); // 输出: [2, 4, 6, 8]

• Array.prototype.filter

  filter方法创建一个新数组，包含所有通过提供的函数实现的测试的元素。

  const numbers = [1, 2, 3, 4];
  const evens = numbers.filter(function(number) {
      return number % 2 === 0;
  });
  console.log(evens); // 输出: [2, 4]

• Array.prototype.reduce

  reduce方法对数组中的每个元素执行一个提供的函数（从左到右），最终计算为一个单一的值。

  const numbers = [1, 2, 3, 4];
  const sum = numbers.reduce(function(total, number) {
      return total + number;
  }, 0);
  console.log(sum); // 输出: 10

3.2 函数作为参数

高阶函数不仅限于数组操作。任何可以接受函数作为参数的函数都是高阶函数。例如，setTimeout、addEventListener这些常见的函数都是高阶函数。

function greet(name) {
    console.log('Hello, ' + name + '!');
}

function executeGreet(greetFunction, name) {
    greetFunction(name);
}

executeGreet(greet, 'Alice'); // 输出: Hello, Alice!

3.3 函数作为返回值

高阶函数可以返回一个新的函数，以实现延迟计算或函数组合的效果。

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

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

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

4. 函数组合

函数组合是函数式编程中的一个重要概念，指的是将多个函数组合在一起，使得输出能够从一个函数传递到另一个函数，形成一个新的函数。可以使用高阶函数实现这种模式。

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

function addOne(number) {
    return number + 1;
}

function square(number) {
    return number * number;
}

const addOneAndSquare = compose(square, addOne);
console.log(addOneAndSquare(2)); // 输出: 9

5. 高阶函数的案例与应用

案例 1：事件处理

function handleClick(event) {
    console.log('Button clicked:', event.target);
}

const button = document.querySelector('button');
button.addEventListener('click', handleClick);

解释： 在这个例子中，addEventListener函数接受一个回调函数作为参数，这使得handleClick函数可以在按钮被点击时执行。

案例 2：延迟执行

function delay(func, wait) {
    return function(...args) {
        setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
}

const delayedLog = delay(console.log, 2000);
delayedLog('Hello after 2 seconds'); // 输出: Hello after 2 seconds （延迟2秒）

解释： delay函数返回了一个新的函数，该函数会在指定的时间延迟后执行传入的函数。

6. 高阶函数的练习题

练习题 1：简单的函数组合

编写一个compose函数，它接受两个函数f和g作为参数，并返回一个新的函数，该函数的行为是先调用g，再调用f。

function compose(f, g) {
    // 在此处实现
}

function addOne(x) {
    return x + 1;
}

function multiplyByTwo(x) {
    return x * 2;
}

const addOneThenMultiplyByTwo = compose(multiplyByTwo, addOne);
console.log(addOneThenMultiplyByTwo(5)); // 输出: 12

答案：

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

function addOne(x) {
    return x + 1;
}

function multiplyByTwo(x) {
    return x * 2;
}

const addOneThenMultiplyByTwo = compose(multiplyByTwo, addOne);
console.log(addOneThenMultiplyByTwo(5)); // 输出: 12

练习题 2：自定义map函数

编写一个customMap函数，它接受一个数组和一个回调函数，返回一个新数组，其元素是通过调用回调函数处理原数组中的每个元素后的结果。

function customMap(array, callback) {
    // 在此处实现
}

const numbers = [1, 2, 3, 4];
const doubledNumbers = customMap(numbers, function(number) {
    return number * 2;
});
console.log(doubledNumbers); // 输出: [2, 4, 6, 8]

答案：

function customMap(array, callback) {
    const result = [];
    for (let i = 0; i < array.length; i++) {
        result.push(callback(array[i], i, array));
    }
    return result;
}

const numbers = [1, 2, 3, 4];
const doubledNumbers = customMap(numbers, function(number) {
    return number * 2;
});
console.log(doubledNumbers); // 输出: [2, 4, 6, 8]

练习题 3：函数柯里化

编写一个curry函数，它接受一个函数作为参数，并返回一个柯里化版本的函数。

function curry(func) {
    // 在此处实现
}

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

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)); // 输出: 3

答案：

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

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

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)); // 输出: 3

通过这些练习题，您可以进一步加深对高阶函数的理解和应用能力，尤其是在实际开发中如何利用高阶函数来简化代码和提升代码的灵活性。