17370845950

高阶函数是接受函数为参数或返回函数的函数。map、filter、reduce 均属此类，依赖传入函数处理逻辑；debounce 是典型实用案例，返回防抖后的新函数；但需权衡可读性、性能与必要性。

高阶函数不是“高级”的函数，而是**接受函数作为参数，或返回函数作为结果的函数**——这是 JavaScript 中函数式编程的基石，不是语法糖，是实际工程中天天在用的模式。

为什么 map、filter、reduce 都算高阶函数

它们都把一个函数（回调）当作输入，并基于该函数逻辑处理数组。比如 map 不关心你具体怎么转换，只负责把每个元素喂给你的函数；filter 也不判断真假值本身，而是调用你传入的函数来决定留不留。

• map 的第二个参数（回调）必须是函数，否则报错 TypeError: callback is not a function
• 传给 filter 的函数必须返回布尔值，但 JavaScript 会强制转布尔，所以 return x 和 return !!x 行为可能不同
• reduce 的第一个参数（累加器函数）如果没提供初始值，会跳过第一个元素——容易漏掉边界情况

如何手写一个真正有用的高阶函数：防抖封装

真实场景里，你不会只为了“演示概念”而写高阶函数。比如封装 debounce，它接收一个函数和延迟时间，返回一个新函数，这个新函数具备防抖能力：

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleSearch = debounce(fetchSuggestions, 300);
input.addEventListener('input', handleSearch); // 每次输入不立刻触发，等停顿 300ms 后才调用

关键点：

• 返回的是函数，不是执行结果，所以不能写成 return fn(...args)
• 用 ...args 和 apply 保证原函数的 this 和参数透传，否则事件监听里 this 会丢失
• 闭包

  

  保存了 timer，这是行为“记忆”的来源，也是容易内存泄漏的地方（比如组件卸载后没清理定时器）

什么时候不该用高阶函数：性能与可读性的临界点

高阶函数不是银弹。嵌套太多层、反复返回匿名函数，会让调试变得困难：

• Chrome DevTools 里堆栈显示为 anonymous，难以定位来源
• 每次调用高阶函数都会创建新函数实例，频繁调用（如渲染循环中）可能触发 GC
• 用 curry 把 add(a, b, c) 拆成 add(1)(2)(3) 很酷，但团队协作时，别人第一眼未必理解你在做什么
• React 中过度使用 useCallback 包裹高阶函数返回值，反而因依赖项变化导致无效重创建

真正难的不是写出高阶函数，而是判断某段逻辑是否值得被抽象成高阶函数——它得解决重复、隐藏副作用、或统一控制流，而不是仅仅为了“看起来更函数式”。