JS函数如何定义高阶函数_JS高阶函数定义与使用实例分析

高阶函数是接收函数作为参数或返回函数的函数,如mapFilter及自定义的makeAdder和withTiming,广泛用于事件处理、异步编程与中间件,体现函数式编程的抽象与复用思想。

JS函数如何定义高阶函数_JS高阶函数定义与使用实例分析

高阶函数是javaScript中非常核心的概念,理解它能极大提升代码的抽象能力和复用性。简单来说,只要一个函数接收另一个函数作为参数,或者返回一个函数,它就是高阶函数。这种能力得益于javascript中函数是一等公民(first-class citizen)的特性。

什么是高阶函数?

在JavaScript中,函数不仅可以被调用,还能像普通值一样被传递、赋值、作为参数或返回值使用。基于这一点,高阶函数具备以下两种特征之一即可:

  • 接受一个或多个函数作为输入(参数)
  • 返回一个函数作为输出

下面通过几个典型例子来说明。

常见高阶函数使用实例

JavaScript内置了很多高阶函数,尤其在数组操作中非常常见。

1. 数组方法中的高阶函数

比如 mapfilterreduce 都是典型的高阶函数,它们接收一个函数作为参数。

示例:

 const numbers = [1, 2, 3, 4]; const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8] const evens = numbers.filter(x => x % 2 === 0); // [2, 4] const sum = numbers.reduce((acc, x) => acc + x, 0); // 10 

这里传入的箭头函数 x => x * 2 就是作为参数的函数,map 是高阶函数。

2. 自定义高阶函数:函数作为返回值

JS函数如何定义高阶函数_JS高阶函数定义与使用实例分析

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台,支持数字人形象定制、短视频创作、数字人直播等。

JS函数如何定义高阶函数_JS高阶函数定义与使用实例分析 36

查看详情 JS函数如何定义高阶函数_JS高阶函数定义与使用实例分析

可以创建一个函数,用来生成特定行为的函数。

例如,实现一个通用的加法生成器:

 function makeAdder(n) {   return function(x) {     return x + n;   }; } <p>const add5 = makeAdder(5); console.log(add5(3)); // 输出 8</p>

makeAdder 返回了一个新函数,因此它是一个高阶函数。这种方式常用于闭包和柯里化场景。

3. 函数作为参数:通用处理逻辑

编写一个函数,对任意操作进行包装执行,并记录时间:

 function withTiming(fn) {   return function(...args) {     console.log("开始执行");     const start = Date.now();     const result = fn.apply(this, args);     const end = Date.now();     console.log(`执行耗时: ${end - start}ms`);     return result;   }; } <p>function slowCalc(n) { let sum = 0; for (let i = 0; i < n; i++) { sum += i; } return sum; }</p><p>const timedCalc = withTiming(slowCalc); timedCalc(1000000); // 会输出执行时间</p>

这个例子展示了如何通过高阶函数增强原有函数的功能,这是函数式编程中“装饰”思想的体现。

高阶函数的实际应用场景

高阶函数不仅存在于语法层面,更广泛应用于实际开发中。

  • 事件处理dom事件监听中,回调函数作为参数传入 addEventListener
  • 异步编程promisethen 方法接收成功和失败的回调函数
  • react Hooks:如 useCallbackuseMemo 返回记忆化的函数或值
  • 中间件机制express.js 或 Redux 中,中间件本质上是高阶函数

基本上就这些。掌握高阶函数的关键在于理解“函数可传递”这一思想,并学会将逻辑抽象成可复用的函数结构。不复杂但容易忽略。

上一篇
下一篇
text=ZqhQzanResources