咳咳，各位观众，晚上好！我是你们今晚的 JavaScript 讲师，老码。今天咱们不聊八卦，专门聊聊 JavaScript 里的高阶函数，以及它们在函数式编程里那些骚操作。放心，保证让你听得懂，学得会，还能回家秀一把。
高阶函数：啥是高阶，它高在哪儿？
咱们先来拆解一下“高阶函数”这个词。啥叫“高阶”？不是说它比别的函数牛逼，而是说它满足了以下至少一个条件：
- 接收一个或多个函数作为参数。
- 返回一个函数。
简单来说，高阶函数就是把函数当成参数或者返回值来使用的函数。这听起来好像有点绕，但其实咱们早就见过它们了。
比如，Array.prototype.map、Array.prototype.filter、Array.prototype.reduce，这些都是 JavaScript 里内置的高阶函数。
咱们来举个 map 的例子：
const numbers = [1, 2, 3, 4, 5];
// 使用 map 将每个数字乘以 2
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]在这个例子里，map 函数接收了一个函数 function(number) { return number * 2; } 作为参数，这个函数定义了对数组中每个元素的操作。
高阶函数的设计思想：解耦与抽象
高阶函数的设计思想，说白了就是解耦和抽象。
- 解耦： 它们将算法的实现和具体的操作分离开来。 就像上面的
map例子，map负责循环数组，而你提供的函数负责处理每个元素。这样，你可以随意更换处理元素的函数，而不用修改map的实现。 - 抽象： 它们将常见的操作模式抽象出来，让你可以专注于业务逻辑，而不用重复编写那些繁琐的循环、判断等代码。
举个更现实的例子。假设你要对一个数组进行多种操作：
- 筛选出所有大于 5 的数字。
- 将筛选后的数字都乘以 2。
- 计算所有结果的总和。
如果不用高阶函数，你可能需要写三个循环：
const numbers = [1, 6, 3, 8, 2, 9];
// 1. 筛选出所有大于 5 的数字
const filteredNumbers = [];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 5) {
filteredNumbers.push(numbers[i]);
}
}
// 2. 将筛选后的数字都乘以 2
const doubledNumbers = [];
for (let i = 0; i < filteredNumbers.length; i++) {
doubledNumbers.push(filteredNumbers[i] * 2);
}
// 3. 计算所有结果的总和
let sum = 0;
for (let i = 0; i < doubledNumbers.length; i++) {
sum += doubledNumbers[i];
}
console.log(sum); // 输出: 46这段代码虽然能完成任务，但看起来是不是有点冗余？每个操作都要写一个循环，重复的代码太多了。
如果使用高阶函数，我们可以用更简洁的方式实现：
const numbers = [1, 6, 3, 8, 2, 9];
const sum = numbers
.filter(number => number > 5)
.map(number => number * 2)
.reduce((acc, number) => acc + number, 0);
console.log(sum); // 输出: 46这段代码使用了 filter、map 和 reduce 三个高阶函数，将三个操作串联起来，代码更加简洁易懂。
函数组合 (Function Composition)：像搭积木一样组合函数
函数组合是指将多个函数组合成一个新函数的过程。就像搭积木一样，你可以将多个小积木（函数）组合成一个更大的积木（新函数）。
函数组合的目的是为了提高代码的复用性和可读性。通过将多个小函数组合成一个大函数，你可以避免编写重复的代码，并且让代码更加模块化。
在 JavaScript 中，我们可以使用高阶函数来实现函数组合。最常见的函数组合方式是使用 reduce 函数。
// 一个简单的函数，将数字加 1
const addOne = x => x + 1;
// 另一个简单的函数，将数字乘以 2
const multiplyByTwo = x => x * 2;
// 使用 reduce 实现函数组合
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
// 将 addOne 和 multiplyByTwo 组合成一个新函数
const addOneAndMultiplyByTwo = compose(multiplyByTwo, addOne);
// 调用新函数
console.log(addOneAndMultiplyByTwo(3)); // 输出: 8 ( (3 + 1) * 2 )在这个例子里，compose 函数接收多个函数作为参数，并返回一个新的函数。新函数会将接收到的参数依次传递给这些函数，最终返回最后一个函数的结果。
compose 函数的关键在于 reduceRight。reduceRight 函数从数组的末尾开始遍历，将每个函数依次应用到累积值上。这样，我们就可以按照从右到左的顺序执行这些函数。
函数组合的优势
- 提高代码复用性： 你可以将多个小函数组合成一个大函数，然后在不同的地方重复使用这个大函数。
- 提高代码可读性： 函数组合可以将复杂的逻辑分解成多个小步骤，让代码更加易于理解。
- 易于测试： 你可以单独测试每个小函数，然后再测试整个组合函数。
柯里化 (Currying)：函数的逐步求值
柯里化是指将一个接收多个参数的函数转换成一系列接收单个参数的函数的过程。
举个例子，假设你有一个函数 add(x, y)，它接收两个参数并返回它们的和。你可以将这个函数柯里化成一个函数 curriedAdd(x)(y)，它接收一个参数 x，并返回一个新的函数，这个新函数接收一个参数 y，并返回 x + y。
// 一个简单的函数，将两个数字相加
const add = (x, y) => x + y;
// 柯里化后的函数
const curriedAdd = x => y => x + y;
// 调用柯里化后的函数
const add5 = curriedAdd(5);
console.log(add5(3)); // 输出: 8
console.log(curriedAdd(5)(3)); // 输出: 8在这个例子里，curriedAdd 函数接收一个参数 x，并返回一个新的函数。这个新函数接收一个参数 y，并返回 x + y。
你可以像 curriedAdd(5)(3) 这样直接调用柯里化后的函数，也可以像 add5(3) 这样先创建一个接收剩余参数的函数，然后再调用这个函数。
柯里化的作用
- 延迟执行： 柯里化可以让你延迟执行函数，直到你收集到所有需要的参数。
- 参数复用： 柯里化可以让你复用一些参数，而不用每次都重新传递它们。
- 函数组合： 柯里化可以让你更容易地将多个函数组合成一个新函数。
柯里化的实现
你可以使用多种方式来实现柯里化。一种常见的方式是使用递归：
const curry = (fn) => {
const arity = fn.length; // 获取函数的参数个数
return function curried(...args) {
if (args.length >= arity) {
return fn(...args); // 参数足够，直接调用原函数
} else {
return function(...newArgs) {
return curried(...args, ...newArgs); // 参数不够，返回一个新的函数，继续收集参数
};
}
};
};
// 示例
const add = (x, y, z) => x + y + z;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出: 6
console.log(curriedAdd(1, 2)(3)); // 输出: 6
console.log(curriedAdd(1)(2, 3)); // 输出: 6
console.log(curriedAdd(1, 2, 3)); // 输出: 6在这个例子里，curry 函数接收一个函数 fn 作为参数，并返回一个柯里化后的函数。柯里化后的函数会判断接收到的参数个数是否达到 fn 的参数个数。如果达到，就直接调用 fn 并返回结果。如果没有达到，就返回一个新的函数，这个新函数会继续收集参数，直到达到 fn 的参数个数。
高阶函数、函数组合和柯里化的关系
这三者并不是孤立存在的，而是相互关联、相互促进的关系。
- 高阶函数是基础： 函数组合和柯里化都依赖于高阶函数。如果没有高阶函数，你就无法将函数作为参数传递给其他函数，也无法返回一个函数。
- 函数组合是目标： 函数组合的目的是为了将多个小函数组合成一个大函数，从而提高代码的复用性和可读性。
- 柯里化是手段： 柯里化可以让你更容易地将多个函数组合成一个新函数。通过柯里化，你可以将一个接收多个参数的函数转换成一系列接收单个参数的函数，然后将这些函数组合起来。
可以用一张表格来总结它们的关系：
| 特性 | 高阶函数 | 函数组合 | 柯里化 |
|---|---|---|---|
| 定义 | 接收/返回函数的函数 | 将多个函数组合成一个新函数 | 将多参函数转换为单参函数序列 |
| 核心思想 | 解耦与抽象 | 提高复用性和可读性 | 延迟执行和参数复用 |
| 实现方式 | map, filter, reduce |
reduce, compose |
递归, 闭包 |
| 作用 | 提供函数式编程的基础 | 构建更复杂的函数逻辑 | 便于参数配置和函数组合 |
| 例子 | Array.map |
compose(f, g)(x) => f(g(x)) |
add(x)(y) => x + y |
真实世界的应用
高阶函数、函数组合和柯里化在现代 JavaScript 开发中被广泛应用。
- React/Redux： Redux 的
connect函数就是一个典型的高阶函数，它将 React 组件连接到 Redux store。React Hooks 也大量使用了高阶函数，比如useEffect、useCallback等。 - Lodash/Underscore： 这些流行的 JavaScript 工具库提供了大量的实用高阶函数，可以帮助你更轻松地处理数组、对象等数据结构。
- 函数式编程库： 像 Ramda、 Sanctuary 这样的函数式编程库，更是将高阶函数、函数组合和柯里化发挥到了极致。
总结
今天咱们聊了 JavaScript 的高阶函数，以及它们在函数式编程中实现函数组合和柯里化的作用。希望通过今天的讲解，你能对高阶函数有更深入的理解，并在实际开发中灵活运用它们。
记住，函数式编程不是银弹，但它可以帮助你编写更简洁、更可维护、更易于测试的代码。
好了，今天的讲座就到这里。感谢大家的收听！
（老码鞠躬下台）