高阶函数是接受函数为参数或返回函数的函数,体现函数式编程思想;如map、filter、reduce等内置方法及节流、HOC、useCallback等均属其应用。

高阶函数是指接受函数作为参数,或者返回函数作为结果的函数。它不是某个特定函数,而是一种函数设计模式,是函数式编程的核心思想之一。
高阶函数的两个基本特征
一个函数只要满足以下任一条件,就是高阶函数:
- 接收一个或多个函数作为参数(例如 map、filter、reduce)
- 返回一个新函数(例如柯里化函数、节流/防抖函数)
注意:JavaScript 中函数是一等公民,可以赋值给变量、作为参数传递、从函数中返回,这为高阶函数提供了语言基础。
常见内置高阶函数的实际用法
数组方法是最常接触的高阶函数,它们让数据处理更声明式、更可读:
立即学习“Java免费学习笔记(深入)”;
-
map:对每个元素做转换,返回新数组。比如将用户列表中的 name 提取为字符串数组:
users.map(u => u.name) -
filter:筛选符合条件的元素。比如获取所有已激活的订单:
orders.filter(o => o.status === 'active') -
reduce:聚合计算。比如统计购物车总价:
cart.reduce((sum, item) => sum + item.price * item.qty, 0)
这些方法不修改原数组,符合不可变原则,便于调试和测试。
自定义高阶函数提升代码复用性
当多个地方需要相似逻辑时,可抽象为高阶函数:
- 带权限校验的 API 调用封装:传入原始请求函数,返回一个自动检查登录态的新函数
- 日志增强函数:接收任意函数,返回带执行时间与参数记录的包装函数
- 重试机制:传入异步操作函数,返回自动失败重试三次的新函数
例如节流函数:const throttledSave = throttle(saveToServer, 300),后续调用 throttledSave() 就自动具备节流能力。
高阶函数与 React 中的实践结合
在 React 开发中,高阶函数自然融入组件逻辑:
- HOC(高阶组件)本质是接收组件并返回新组件的高阶函数,用于复用状态逻辑(如 withAuth、withLoading)
- 自定义 Hook 内部大量使用高阶函数思想,比如
useCallback接收函数并返回记忆化版本 - 事件处理器常通过闭包+高阶函数生成,如
const handleClick = (id) => () => deleteItem(id)
这种写法避免重复绑定、减少子组件不必要的重渲染。











