高阶函数是接收函数作为参数或返回函数的函数,体现JavaScript函数是一等公民特性;常见于数组处理(map/filter/reduce)、回调机制、函数工厂(柯里化)、逻辑增强(防抖/节流/AOP)。

JavaScript 中的高阶函数,指的是**接收函数作为参数**,或**返回一个函数**的函数。它不是某种特殊语法,而是基于 JavaScript 函数是一等公民(first-class function)这一特性的自然体现——函数可以赋值、传参、返回、存储在数据结构中。
数组处理:map、filter、reduce
这是最直观、最常用的高阶函数场景。它们把“对每个元素做什么”这个逻辑抽出来,交由你传入的函数决定,原数组不变,语义清晰,代码简洁。
-
map:逐个转换,生成新数组。比如
[1,2,3].map(x => x * 2)→[2,4,6] -
filter:按条件筛选,返回满足条件的元素组成的新数组。比如
[150,120,90,85].filter(n => n →[90,85] -
reduce:聚合计算,把整个数组压缩成一个值。比如
[2,4,6].reduce((sum, n) => sum + n, 0)→12
回调机制:异步与事件驱动
几乎所有异步操作和 DOM 事件都依赖高阶函数。函数不立即执行,而是被“交给”系统,在合适时机调用——这正是高阶函数作为参数的价值所在。
- 文件读取:
fs.readFile('a.txt', 'utf8', (err, data) => { ... }) - 定时任务:
setTimeout(() => console.log('done'), 1000) - 点击监听:
btn.addEventListener('click', () => alert('clicked'))
函数工厂:柯里化与偏函数
通过返回函数,预先固化部分参数,生成更具体、可复用的新函数。适合配置复用、行为定制等场景。
立即学习“Java免费学习笔记(深入)”;
- 前缀生成器:
const addPrefix = prefix => word => `${prefix}${word}`;const addDollar = addPrefix('$');addDollar('9.99')→'$9.99' - 类型判断封装:
const isType = type => obj => Object.prototype.toString.call(obj) === `[object ${type}]`;const isArray = isType('Array')
逻辑增强:节流、防抖、AOP
不修改原始函数,而是用高阶函数“包装”它,在执行前后插入额外逻辑,实现横切关注点的解耦。
- 防抖:
debounce(fn, 300)返回一个新函数,确保 fn 在连续触发中只执行最后一次 - 节流:
throttle(fn, 100)控制 fn 最多每 100ms 执行一次 - AOP(面向切面):
before(fn, beforeFn)在 fn 执行前自动运行 beforeFn











