JS 函数组合 (Function Composition) 与高阶函数

各位观众老爷，晚上好！今天咱们聊聊JS里那些听起来玄乎，用起来贼爽的“函数组合”和“高阶函数”。准备好，要开车了！

开场白：函数，代码界的乐高积木

在编程的世界里，函数就像乐高积木，单个积木可能平平无奇，但通过巧妙的组合，就能搭建出各种复杂的模型。函数组合和高阶函数，就是玩转这些积木的高级技巧，能让你的代码更简洁、更灵活、更像艺术品（而不是一堆乱麻）。

第一部分：高阶函数 – 幕后推手

首先，咱们得认识一下高阶函数。这家伙是函数组合的基础，没有它，后面的戏就唱不起来了。

1. 什么是高阶函数？

简单来说，高阶函数就是：

• 可以接收一个或多个函数作为参数的函数。
• 或者，返回值是一个函数的函数。

是不是有点绕？没关系，看例子：

// 接收函数作为参数的例子
function operate(num1, num2, operation) {
  return operation(num1, num2);
}

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

function subtract(a, b) {
  return a - b;
}

console.log(operate(5, 3, add));      // 输出: 8
console.log(operate(5, 3, subtract)); // 输出: 2

// 返回函数的例子
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5));  // 输出: 10
console.log(triple(5));  // 输出: 15

解释一下：

• operate 函数，它接收两个数字和一个函数 operation 作为参数。operation 负责具体的运算，operate 只是负责调用它。
• multiplier 函数，它接收一个 factor (因子)，然后返回一个新的函数。这个新的函数会把接收到的 number 乘以 factor。

2. 常见的高阶函数

JS 内置了很多常用的高阶函数，比如：

函数名	功能	例子
map	对数组中的每个元素应用一个函数，返回一个新数组。	[1, 2, 3].map(x => x * 2); // 输出: [2, 4, 6]
filter	过滤数组中的元素，只保留符合条件的元素。	[1, 2, 3, 4, 5].filter(x => x % 2 === 0); // 输出: [2, 4]
reduce	将数组中的元素归约为一个单一的值。	[1, 2, 3, 4, 5].reduce((acc, curr) => acc + curr, 0); // 输出: 15
forEach	对数组中的每个元素执行一次提供的函数 (没有返回值，主要用于副作用).	[1, 2, 3].forEach(x => console.log(x)); // 输出: 1, 2, 3 (分别在控制台输出)
sort	对数组进行排序 (可以传入自定义的排序函数).	[3, 1, 4, 1, 5, 9, 2, 6].sort((a, b) => a - b); // 输出: [1, 1, 2, 3, 4, 5, 6, 9]

这些函数都是接收一个函数作为参数，然后对数组进行各种操作。掌握了它们，你就能轻松地处理各种数组操作，告别 for 循环的噩梦。

3. 高阶函数的意义

高阶函数的好处在于：

• 代码复用： 可以把通用的逻辑抽象出来，封装成高阶函数，然后在不同的场景下使用。
• 代码简洁： 可以用更少的代码实现更复杂的功能。
• 代码可读性： 更容易理解代码的意图，因为高阶函数往往表达了更高级别的抽象。

第二部分：函数组合 – 串联珍珠

有了高阶函数这个幕后推手，咱们就可以开始玩更高级的“函数组合”了。

1. 什么是函数组合？

函数组合，顾名思义，就是把多个函数组合起来，形成一个新的函数。就像把珍珠串成项链一样，每个函数都是一颗珍珠，组合起来就成了一条美丽的项链。

举个例子：假设我们有三个函数：

• toUppercase(str): 将字符串转换为大写。
• trim(str): 去掉字符串两端的空格。
• reverse(str): 反转字符串。

现在，我们想把一个字符串先去掉空格，然后转换为大写，最后反转。如果不用函数组合，代码可能是这样的：

function processString(str) {
  const trimmedStr = trim(str);
  const uppercasedStr = toUppercase(trimmedStr);
  const reversedStr = reverse(uppercasedStr);
  return reversedStr;
}

console.log(processString("  hello world  ")); // 输出: "DLROW OLLEH"

这段代码虽然能实现功能，但是看起来有点冗长，而且可读性也不太好。如果用函数组合，代码就会变得更简洁：

function compose(...fns) {
  return function(x) {
    return fns.reduceRight((acc, fn) => fn(acc), x);
  };
}

const processString = compose(reverse, toUppercase, trim);

console.log(processString("  hello world  ")); // 输出: "DLROW OLLEH"

解释一下：

• compose 函数接收任意数量的函数作为参数，然后返回一个新的函数。
• 这个新的函数接收一个参数 x，然后从右向左依次调用传入的函数，并将上一个函数的返回值作为下一个函数的参数。
• reduceRight 方法从数组的末尾开始向前遍历，将数组中的元素归约为一个单一的值。

通过 compose 函数，我们把 reverse, toUppercase, trim 这三个函数组合成了一个新的函数 processString。调用 processString 的时候，它会依次调用这三个函数，并将结果传递下去。

2. 函数组合的原理

函数组合的本质就是一种“数据管道”的思想。数据像水一样，从管道的一端流进来，经过一系列函数的处理，最后从管道的另一端流出去。

可以用下图来表示：

数据 --> 函数1 --> 函数2 --> 函数3 --> 结果

每个函数都是一个处理数据的“水管”，函数组合就是把这些水管连接起来，形成一个完整的管道。

3. 函数组合的优势

函数组合的好处在于：

• 代码简洁： 可以用更少的代码实现更复杂的功能。
• 代码可读性： 更容易理解代码的意图，因为函数组合表达了更高级别的抽象。
• 代码可测试性： 每个函数都是独立的，可以单独进行测试。
• 代码可维护性： 更容易修改和维护代码，因为每个函数都是独立的。

4. 函数组合的实现方式

除了上面提到的 compose 函数，还有一些其他的函数组合实现方式：

• Pipe: Pipe 和 Compose 的区别在于执行顺序，Pipe 从左向右执行，而 Compose 从右向左执行。

function pipe(...fns) {
  return function(x) {
    return fns.reduce((acc, fn) => fn(acc), x);
  };
}

const processString = pipe(trim, toUppercase, reverse);

console.log(processString("  hello world  ")); // 输出: "DLROW OLLEH"

• Lodash 的 _.flow 和 _.flowRight: Lodash 提供了 _.flow 和 _.flowRight 两个函数，分别对应 Pipe 和 Compose。

import { flow, flowRight } from 'lodash';

const processStringFlowRight = flowRight(reverse, toUppercase, trim);
const processStringFlow = flow(trim, toUppercase, reverse);

console.log(processStringFlowRight("  hello world  ")); // 输出: "DLROW OLLEH"
console.log(processStringFlow("  hello world  ")); // 输出: "DLROW OLLEH"

5. 函数组合的应用场景

函数组合可以应用在各种场景下，比如：

• 数据转换： 将一种数据格式转换为另一种数据格式。
• 事件处理： 对事件进行一系列的处理。
• 表单验证： 对表单数据进行验证。
• 状态管理： 在状态管理库中使用函数组合来更新状态。

第三部分：函数组合的进阶 – Point-Free Style

掌握了函数组合的基本用法之后，咱们可以再深入一点，学习一种更高级的编程风格：Point-Free Style。

1. 什么是 Point-Free Style？

Point-Free Style 是一种函数式编程风格，它的特点是函数定义中不出现任何参数。

是不是有点懵？没关系，看例子：

// 非 Point-Free Style
function greet(name) {
  return "Hello, " + name + "!";
}

// Point-Free Style
const greet = (name) => `Hello, ${name}!`;

// 更进一步，如果已经存在一个接受name参数并返回greeting的函数
const greet2 = (name) => greetingFunction(name); // 假设greetingFunction存在

// Point-Free Style （假设greetingFunction已经定义，它接受name并返回greeting）
const greet3 = greetingFunction;

可以看到，Point-Free Style 的 greet3 函数定义中没有出现任何参数。它只是简单地把 greetingFunction 函数赋值给了 greet3。

2. Point-Free Style 的好处

Point-Free Style 的好处在于：

• 代码简洁： 可以减少代码的冗余。
• 代码可读性： 更容易理解代码的意图，因为 Point-Free Style 强调的是函数的组合，而不是函数的具体实现。
• 代码可测试性： 更容易测试代码，因为每个函数都是独立的。

3. 如何实现 Point-Free Style？

要实现 Point-Free Style，需要用到一些技巧，比如：

• 柯里化 (Currying): 柯里化是一种把接收多个参数的函数转换为接收单个参数的函数的技术。

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

// 柯里化后的 add 函数
function curriedAdd(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = curriedAdd(5);
console.log(add5(3)); // 输出: 8

• 部分应用 (Partial Application): 部分应用是一种预先填充函数的部分参数的技术。

function greet(greeting, name) {
  return greeting + ", " + name + "!";
}

// 部分应用后的 greet 函数
const sayHello = greet.bind(null, "Hello"); // 第一个参数是this，这里不需要绑定this，所以是null

console.log(sayHello("World")); // 输出: "Hello, World!"

通过柯里化和部分应用，我们可以把接收多个参数的函数转换为接收单个参数的函数，从而更容易实现 Point-Free Style。

4. Point-Free Style 的例子

假设我们有以下需求：

• 从一个数组中提取出所有偶数。
• 将这些偶数乘以 2。
• 将结果转换为字符串。

不用 Point-Free Style，代码可能是这样的：

function processNumbers(numbers) {
  const evenNumbers = numbers.filter(x => x % 2 === 0);
  const doubledNumbers = evenNumbers.map(x => x * 2);
  const stringifiedNumbers = doubledNumbers.map(x => x.toString());
  return stringifiedNumbers;
}

console.log(processNumbers([1, 2, 3, 4, 5, 6])); // 输出: ["4", "8", "12"]

用 Point-Free Style，代码可以这样写：

const isEven = x => x % 2 === 0;
const double = x => x * 2;
const toString = x => x.toString();

const processNumbers = numbers => numbers
  .filter(isEven)
  .map(double)
  .map(toString);

console.log(processNumbers([1, 2, 3, 4, 5, 6])); // 输出: ["4", "8", "12"]

或者更进一步，使用compose：

const isEven = x => x % 2 === 0;
const double = x => x * 2;
const toString = x => x.toString();

const map = fn => array => array.map(fn); // 柯里化 map

const processNumbers = compose(map(toString), map(double), array => array.filter(isEven));

console.log(processNumbers([1, 2, 3, 4, 5, 6])); // 输出: ["4", "8", "12"]

可以看到，Point-Free Style 的代码更加简洁、易读，也更容易测试。

总结：函数组合，代码的艺术

今天我们聊了 JS 的函数组合和高阶函数，以及 Point-Free Style 这种高级编程风格。希望大家能够掌握这些技巧，写出更简洁、更优雅、更具艺术性的代码。

记住，编程不仅仅是实现功能，更是一种艺术，一种创造。函数组合就是你手中的画笔，可以让你在代码的世界里自由挥洒，创造出属于你自己的 masterpiece！

下课！