17370845950

高阶函数是JavaScript处理行为抽象的核心机制，指接收或返回函数的函数；map/filter/reduce均属此类，支持不可变数据操作与链式调用。

高阶函数不是语法糖，而是 JavaScript 处理行为抽象的核心机制——它让你把“做什么”和“怎么做”真正分开。

map/filter/reduce 为什么是高阶函数？

因为它们都接收一个 callback 函数作为参数，并在内部调用它。这不是约定俗成，而是语言设计：只要函数能“吃函数”或“吐函数”，就是高阶函数。

• map 接收 fn，对每个元素执行 fn(item)，返回新数组
• filter 接收 predicate（返回布尔值的函数），只保留 predicate(item) === true 的项
• reduce 接收 reducer（两个参数的函数），用它逐个累积结果

const prices = [12.99, 24.5, 8.75];
const vatRates = [0.1, 0.15, 0.2];
// 高阶函数链：每一步都依赖上一步返回的函数式结果
const withVat = prices.map((p, i) => p * (1 + vatRates[i]));
const above15 = withVat.filter(p => p > 15);
const total = above15.reduce((sum, p) => sum + p, 0); // 39.675

⚠️ 常见错误：把 map 当成 for 循环用，比如在回调里直接 push 到外部数组——这破坏了不可变性，也失去了链式优势。

自己写高阶函数时，闭包怎么不翻车？

返回函数时，最容易忽略变量捕获时机。比如循环中创建多个事件处理器，却全指向最后一个值：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 正确输出 0, 1, 2（let 有块级作用域）
}
// 但如果用 var，或手动闭包没写对：
for (var j = 0; j < 3; j++) {
  setTimeout((() => j)(), 100); // ❌ 错误：立即执行，返回的是函数调用结果，不是函数
}

• 用 let 替代 var 是最简方案（ES6+）
• 若需兼容旧环境，显式闭包必须返回函数：(j => () => console.log(j))(j)
• 别在闭包里引用会变化的外部变量（如全局计数器），除非你明确要共享状态

函数组合（compose/pipe）在真实业务里怎么落地？

不是炫技，而是让数据转换逻辑可读、可测、可复用。比如处理用户输入：

• 先 trim() 去空格
• 再 toLowerCase() 统一大小写
• 最后 replace(/[^a-z0-9]/g, '') 过滤非法字符

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const sanitize = compose(
  str => str.replace(/[^a-z0-9]/g, ''),
  str => str.toLowerCase(),
  str => str.trim()
);
console.log(sanitize("  USER@NAME!123 ")); // "username123"

⚠️ 注意：compose 是从右往左执行（数学惯例），而 pipe 是从左往右。团队统一一种风格，否则协作时容易看反执行顺序。

异步场景下，高阶函数如何避免回调地狱？

现代开发中，async/await 已大幅简化流程，但高阶函数仍在底层支撑着封装逻辑。比如封装一个带重试的 fetch：

const withRetry = (fn, maxRetries = 3) => async (...args) => {
  for (let i = 0; i <= maxRetries; i++) {
    try {
      return await fn(...args);
    } catch (err) {
      if (i === maxRetries) throw err;
      await new Promise(r => setTimeout(r, 1000 * (2 ** i))); // 指数退避
    }
  }
};
const safeFetch = withRetry(fetch);
safeFetch('/api/data').catch(console.error);

• 这个 withRetry 是典型的高阶函数：接收函数 fn，返回新函数
• 它不侵入原始逻辑，也不强制你改写 fetch 调用方式
• 容易被忽略的点：错误堆栈可能变深，调试时注意 err.stack 是否还指向原始位置

真正难的从来不是写出一个高阶函数，而是判断某个逻辑是否值得抽象成高阶函数——它得被复用至少两次，且每次传入的行为差异明显；否则，直接写内联函数更清晰。