高阶函数是接受函数作为参数或返回函数的函数，本质是函数作为一等公民的体现；map/filter/reduce 应保持纯函数特性，debounce/throttle 依赖闭包与定时器管理，React 中 useCallback 和自定义 Hook 亦遵循此范式。
高阶函数就是接受函数作为参数或返回函数的函数
JavaScript 中的高阶函数不是语法特性，而是函数作为一等公民的自然结果。只要一个函数 fn 满足以下任一条件，它就是高阶函数：接收一个函数作为 argument，或者 return 一个函数。它本身不神秘，但容易被“概念”带偏——重点不在“高阶”这个词，而在你是否在有意利用函数的可传递性来解耦逻辑。
map、filter、reduce 是最常被误用的高阶函数
很多人知道它们是高阶函数，却常把回调写成带副作用的语句块，违背了设计初衷。它们本意是声明式地表达“对数据做什么”，而不是“怎么一步步做”。
-
map应只负责转换，不修改原数组，也不触发 API 请求或 DOM 操作 -
filter的回调必须是纯函数：给定相同输入，永远返回相同布尔值；不能依赖外部变量或时间 -
reduce的初始值initialValue容易被忽略，尤其处理空数组时——没传会导致报错TypeError: Reduce of empty array with no initial value
const numbers = [1, 2, 3]; // ✅ 好：纯函数，无副作用 const doubled = numbers.map(n => n * 2);// ❌ 坏：副作用 + 状态污染 let log = []; numbers.map(n => { log.push(
processing ${n}); // 副作用 return n * 2; });
手写 debounce 和 throttle 是理解高阶函数落地的关键场景
它们不是内置函数，却是前端高频需求。核心逻辑都靠“返回函数”实现，且必须闭包保存定时器 ID 或时间戳等状态。
-
debounce(fn, delay)返回的新函数会忽略频繁触发，只执行最后一次延时后的调用 -
throttle(fn, limit)返回的新函数会限制执行频率，比如每 100ms 最多执行一次 - 常见错误：没清除前一个定时器（
clearTimeout漏掉），或没用let声明闭包变量导致多个实例互相覆盖 - 注意
this绑定：直接返回() => fn()会丢失原始this，要用fn.apply(this, arguments)或显式绑定
function debounce(fn, delay) {
let timerId;
return function(...args) {
clearTimeout(timerId);
timerId = setTimeout(() => fn.apply(this, args), delay);
};
}React 中的 useCallback 和自定义 Hook 本质也是高阶函数思维
虽然 useCallback 是 Hook，但它返回的是记忆化的函数，典型“返回函数”的高阶行为。而多数自定义 Hook（如 useApi、useForm）内部都会接收配置或回调，并返回状态和操作函数——这正是高阶函数的封装模式。
立即学习“Java免费学习笔记（深入）”；
- 滥用
useCallback：对不作为 props 传给子组件或不用在依赖数组里的函数加包裹，徒增开销 - 漏掉依赖：
useCallback(() => doSomething(a, b), [a])漏了b，会导致闭包捕获旧值 - 复杂逻辑外移：把表单校验规则写成独立函数再传入
useForm(validate)，比在 Hook 内硬编码更易测、可复用
高阶函数的价值不在“看起来高级”，而在于它迫使你把变化点（比如排序方式、请求策略、防抖阈值）抽出来作为参数，让主流程保持稳定。最容易被忽略的，是那些没被命名、随手写的箭头函数——它们其实已经是你写的第 N 个高阶函数了。
