函数式编程是一种强调使用纯函数和不可变数据的编程范式,在JavaScript中应用十分广泛。高阶函数和函数组合作为函数式编程的核心组成部分,能够有效提升代码的复用性和可读性,减少重复逻辑的产生。

什么是高阶函数
高阶函数的定义非常简单,满足以下两个条件之一的函数就可以称为高阶函数:
- 接收一个或多个函数作为参数
- 返回一个函数作为结果
JavaScript中很多内置方法都属于高阶函数,比如数组的map、filter、reduce方法,它们都接收函数作为参数来处理数组元素。
接收函数作为参数的高阶函数示例
下面是一个自定义的高阶函数,用来对数组中的每个元素执行指定的处理函数:
// 自定义高阶函数,接收数组和处理函数作为参数
function processArray(arr, handler) {
const result = [];
for (let i = 0; i < arr.length; i++) {
// 调用传入的处理函数处理每个元素
result.push(handler(arr[i]));
}
return result;
}
// 定义处理函数
function double(num) {
return num * 2;
}
const numbers = [1, 2, 3, 4];
// 传入处理函数调用高阶函数
const doubledNumbers = processArray(numbers, double);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8]
返回函数的高阶函数示例
返回函数的高阶函数常用于实现函数柯里化或者创建特定场景的处理函数,下面是一个创建乘法函数的示例:
// 高阶函数,返回一个乘法函数
function createMultiplier(multiplier) {
// 返回的函数接收被乘数作为参数
return function(num) {
return num * multiplier;
};
}
// 创建一个乘以3的函数
const multiplyBy3 = createMultiplier(3);
console.log(multiplyBy3(5)); // 输出 15
// 创建一个乘以10的函数
const multiplyBy10 = createMultiplier(10);
console.log(multiplyBy10(2)); // 输出 20
什么是函数组合
函数组合是指将多个小函数组合成一个新函数,让数据依次经过这些小函数的处理,最终得到结果。函数组合的核心思想是单一职责原则,每个小函数只负责一个具体的处理逻辑,通过组合实现复杂的功能。
函数组合的执行顺序通常是从右到左,也就是先执行最右边的函数,再依次执行左边的函数,当然也可以根据需求实现从左到右的组合顺序。
基础函数组合实现
下面是一个简单的函数组合实现,支持组合两个函数:
// 组合两个函数的高阶函数
function compose(fn1, fn2) {
// 返回一个新的函数,接收初始参数
return function(value) {
// 先执行fn2,再将结果传给fn1执行
return fn1(fn2(value));
};
}
// 定义两个处理函数
function addPrefix(str) {
return 'prefix_' + str;
}
function toUpperCase(str) {
return str.toUpperCase();
}
// 组合两个函数,先转大写再加前缀
const processString = compose(addPrefix, toUpperCase);
console.log(processString('test')); // 输出 PREFIX_TEST
支持多函数的组合实现
实际开发中经常需要组合多个函数,下面是支持任意数量函数组合的实现:
// 支持多函数组合的高阶函数,从右到左执行
function compose(...fns) {
// 如果传入的函数数量小于2,直接返回原函数或者默认值
if (fns.length === 0) return (value) => value;
if (fns.length === 1) return fns[0];
// 使用reduce依次组合函数
return fns.reduce((prevFn, currentFn) => {
return (value) => prevFn(currentFn(value));
});
}
// 定义更多处理函数
function trimSpace(str) {
return str.trim();
}
function addSuffix(str) {
return str + '_suffix';
}
// 组合四个函数,执行顺序:trimSpace -> toUpperCase -> addPrefix -> addSuffix
const fullProcess = compose(addSuffix, addPrefix, toUpperCase, trimSpace);
console.log(fullProcess(' hello ')); // 输出 PREFIX_HELLO_suffix
高阶函数与组合的配合使用
高阶函数和函数组合经常配合使用,通过高阶函数生成特定的处理函数,再将这些函数组合成完整的处理流程,能够极大提升代码的灵活性。
比如我们可以先通过高阶函数生成不同倍数的乘法函数,再将这些乘法函数组合成连续乘法的处理流程:
// 之前定义的高阶函数,生成乘法函数
function createMultiplier(multiplier) {
return function(num) {
return num * multiplier;
};
}
// 之前定义的多函数组合函数
function compose(...fns) {
if (fns.length === 0) return (value) => value;
if (fns.length === 1) return fns[0];
return fns.reduce((prevFn, currentFn) => {
return (value) => prevFn(currentFn(value));
});
}
// 生成三个乘法函数
const multiplyBy2 = createMultiplier(2);
const multiplyBy3 = createMultiplier(3);
const multiplyBy4 = createMultiplier(4);
// 组合三个乘法函数,执行顺序:先乘2,再乘3,最后乘4
const multiplyChain = compose(multiplyBy4, multiplyBy3, multiplyBy2);
console.log(multiplyChain(5)); // 输出 120,计算过程:5*2=10,10*3=30,30*4=120
使用注意事项
在使用高阶函数和函数组合时,需要注意以下几点:
- 尽量使用纯函数作为高阶函数的参数,避免函数内部产生副作用,保证组合后的结果可预测
- 函数组合中的每个函数最好只接收一个参数,如果有多个参数可以先通过高阶函数进行柯里化处理
- 不要过度使用函数组合,当组合的函数过多时,会增加代码的调试难度,需要根据实际场景合理选择
函数式编程的核心不是死记硬背高阶函数和组合的语法,而是理解其思想,在合适的场景下使用,让代码更简洁、更易维护。
JavaScript函数式编程高阶函数函数组合修改时间:2026-07-07 05:57:26