17370845950

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

高阶函数是指接受函数作为参数，或者返回函数作为结果的函数。它不是某个特定函数，而是一种函数设计模式，是函数式编程的核心思想之一。

高阶函数的两个基本特征

一个函数只要满足以下任一条件，就是高阶函数：

• 接收一个或多个函数作为参数（例如 map、filter、reduce）
• 返回一个新函数（例如柯里化函数、节流/防抖函数）

注意：JavaScript 中函数是一等公民，可以赋值给变量、作为参数传递、从函数中返回，这为高阶函数提供了语言基础。

常见内置高阶函数的实际用法

数组方法是最常接触的高阶函数，它们让数据处理更声明式、更可读：

• 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)

这种写法避免重复绑定、减少子组件不必要的重渲染。