[JavaScript] 高阶函数

定义

在 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值和部分参数的新函数
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容