定义
在 JavaScript 中,高阶函数(Higher-Order Function) 是一个操作函数的函数,它的定义可以归纳为 :
一个高阶函数满足以下至少一个条件:
1. 接受一个或多个函数作为参数。
2. 返回一个新函数作为其结果。
简单来说,高阶函数就是操作函数的函数:它要么接收函数作为“数据”来处理,要么生成新的函数作为输出。
如何实现高阶函数?
实现高阶函数的关键就是利用 JavaScript 中函数可以作为参数传递和函数可以作为返回值这两大特性。
- 接收函数作为参数
- 直接在形参位置写一个函数类型的参数
- 在函数体内调用它
- 返回一个函数
- 在函数体中用 return function(...) { ... } 返回一个闭包
举个例子
接收函数作为参数
- myMap是高阶函数: 它接受另一个函数 transformFn作为参数。
- 灵活性:myMap负责遍历数组的通用逻辑,但具体的转换操作完全由传入的 transformFn决定。
// 自定义的 map 高阶函数实现
function myMap(array, transformFn) {
// transformFn 是一个函数参数,它定义了如何转换每个元素
const result = [];
for (let i = 0; i < array.length; i++) {
// 调用传入的函数处理每个元素,并将结果存入新数组
result.push(transformFn(array[i], i, array)); // 模仿原生 map,传递元素、索引和原数组
}
return result;
}
// 使用示例 1:将所有数字加倍
const numbers = [1, 2, 3, 4];
const doubled = myMap(numbers, num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8]
// 使用示例 2:将所有字符串转为大写
const words = ['hello', 'world'];
const uppercased = myMap(words, word => word.toUpperCase());
console.log(uppercased); // 输出: ['HELLO', 'WORLD']
返回一个函数
- createMultiplier是高阶函数: 它返回了一个新的函数(return function(number) { ... })。
- 闭包: 返回的内部函数可以访问外部函数 createMultiplier的参数 factor,即使createMultiplier已经执行完毕。这就是闭包的力量。
- 定制行为: 通过传入不同的 factor,我们“定制”并得到了具有不同行为(乘以2或乘以3)的新函数 (double和 triple)。
// createMultiplier 是一个高阶函数,它返回一个新的函数
function createMultiplier(factor) {
// 返回的函数(闭包)记住了传入的 factor
return function (number) {
return number * factor;
};
}
// 使用高阶函数创建特定的函数
const double = createMultiplier(2); // 返回一个总乘以2的函数
const triple = createMultiplier(3); // 返回一个总乘以3的函数
console.log(double(5)); // 输出: 10 (5 * 2)
console.log(triple(5)); // 输出: 15 (5 * 3)
JavaScript 中常见的内置高阶函数
数组方法是使用高阶函数最直观的例子:
- Array.prototype.map(callback): 对数组每个元素应用callback函数,返回新数组。callback是参数。
- Array.prototype.filter(callback):
使用callback函数测试每个元素,返回通过测试的元素组成的新数组。callback是参数。 - Array.prototype.reduce(callback, initialValue): 使用callback函数将数组元素聚合成单个值。callback是参数。
- Array.prototype.forEach(callback): 对数组每个元素执行callback函数。callback是参数。
- Array.prototype.find(callback)/ Array.prototype.findIndex(callback): 使用callback测试元
- Array.prototype.some(callback)/ Array.prototype.every(callback): 使用callback测试元素。
其他常见高阶函数:
- setTimeout(callback, delay )/ setInterval(callback, delay): 接受一个在将来执行的函数作为参数。
- Promise.then(onFulfilled, onRejected) / Promise.catch(onRejected)/ Promise.finally(onFinally): 接受处理成功、失败或最终状态的回调函数。
- Function.prototype.bind(thisArg, ...args): 返回一个绑定了特定this值和部分参数的新函数