当前位置：首页 > 文章列表 > 文章 > 前端 > JS高阶函数详解与实例演示

JS高阶函数详解与实例演示

2025-11-11 23:33:17 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《JS高阶函数定义与使用实例》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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

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

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

什么是高阶函数？

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

接受一个或多个函数作为输入（参数）
返回一个函数作为输出

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

常见高阶函数使用实例

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

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

比如 map、filter、reduce 都是典型的高阶函数，它们接收一个函数作为参数。

示例：

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. 自定义高阶函数：函数作为返回值

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

例如，实现一个通用的加法生成器：

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

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;
  };
}
function slowCalc(n) {
let sum = 0;
for (let i = 0; i < n; i++) {
sum += i;
}
return sum;
}
const timedCalc = withTiming(slowCalc);
timedCalc(1000000); // 会输出执行时间

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