JavaScript 函数式编程讲了很多年很多教程停留在“什么是纯函数”“什么是柯里化”的概念层真正落到业务代码里反而不知道怎么用。这次我们换个角度不绕概念直接看 JavaScript 函数式编程的实用方法哪些函数能直接改写现有业务代码、怎么在 Node.js 环境里跑起来、怎么用纯函数和不可变数据减少 bug、数组批量数据怎么用 map/filter/reduce 一把梭、异步场景如何用函数式思路组织错误处理。这篇文章的目标是让读者看完后能直接在自己的项目里动手。先说这个学习路线最值得关注的几个点。第一纯函数是 JavaScript 函数式编程的地基把“相同输入必然相同输出”这个约束立住单元测试和代码调试成本会明显下降。第二不可变数据配合展开运算符可以在不引入 Immutable.js 之类重量级依赖的情况下完成安全更新。第三高阶函数和数组方法组合能覆盖大部分列表筛选、转换、聚合、分组需求。第四函数组合与柯里化让代码从过程式“一步步执行”变成“一条管道处理”。第五Promise 本身就是函数式思想的异步版配合 compose/pipe 可以让异步流程更清晰。本文会带读者完成这些内容准备一个最小 Node.js 测试环境用纯函数改造一段带副作用的旧代码用 map/filter/reduce 实现批量订单数据处理手写 compose/pipe 和柯里化函数并验证效果在异步场景中做安全的 JSON 解析和错误处理最后给出性能观察方法和常见问题排查清单。适合写过 JavaScript、遇到 this 和闭包容易绕、想把数据处理写得稳定可测的前端或 Node 开发者。1. 核心能力速览先用一张表快速说明 JavaScript 函数式编程这个知识体系的核心能力方便判断这套方法适不适合当前项目。能力项说明核心概念纯函数、不可变数据、高阶函数、函数组合、柯里化运行环境Node.js 14建议 18现代浏览器同样适用主要工具函数map、filter、reduce、flatMap、Object.entries、Promise无需额外依赖只用原生 JavaScript 即可实现大部分函数式能力批量数据处理列表映射、筛选、聚合、分组、对象转换异步支持Promise 链、async/await、函数式错误处理可测试性纯函数可直接断言无需 mock 复杂环境适用场景数据处理、状态管理、业务规则拆分、单元测试需要强调一点这里说的“无需额外依赖”针对的是基础能力。生产项目如果要用更严谨的不可变数据结构、Maybe/Either 这类容器或者要用 lodash/fp、Ramda 这类函数式工具库仍然需要按项目情况引入依赖。文章后面会给出原生实现和工具库两条路线。2. 适用场景与使用边界JavaScript 函数式编程适合谁首先是中大型前端项目的业务逻辑层。这类项目最怕共享状态失控一个对象被多个模块改来改去排查问题要翻遍调用链。换成纯函数和不可变数据后每个函数只对输入负责输出可预测定位问题就变成“找哪一段输入不对”。其次是数据处理密集的场景比如报表聚合、列表筛选、表单格式化这些用数组高阶函数能写得比 for 循环更短更清晰。再次是单元测试敏感的项目纯函数不需要 mock 全局对象不需要模拟时间直接传参断言结果。能解决什么问题核心是降低认知负担和减少副作用带来的隐性 bug。过程式代码经常把“取数据—改数据—存数据”混在一个函数里函数式风格强制你把它拆成“输入—转换—输出”的管道每一段都可以单独测试。批量任务方面一个订单列表可以先 filter 筛状态、再 map 换结构、最后 reduce 做统计整个流程读起来像业务描述本身。不适合什么场景第一极端性能敏感的热路径。函数式风格大量创建新数组、新对象闭包会带来额外调用开销在每帧几万次计算的地方硬套函数式往往得不偿失。第二需要原地更新大对象的老项目如果代码库里到处是对对象的引用改成不可变更新可能引入更多兼容问题。第三团队不熟悉函数式语法时不要激进重构否则会出现“一个人写得开心、一群人看得痛苦”的局面。还有个边界必须说清楚函数式编程不是消灭副作用而是约束副作用。网络请求、读写文件、打印日志、更新 DOM这些操作必然是副作用不可能变成纯函数。正确做法是把副作用推到一个薄薄的外层让核心业务逻辑保持纯函数外层负责“获取数据、调用纯函数、提交结果”。另外涉及用户数据的函数式处理同样要注意隐私边界比如日志里不要打印完整手机号、身份证号、银行卡号接口返回的敏感字段要在纯函数内部脱敏后再传给下一层。版权和合规方面如果函数库来自 npm 第三方包要注意开源协议是否允许商用这一点在小团队里经常被忽略。3. 环境准备与前置条件这部分的定位是“开箱即测”不需要搭建复杂工程。下面是一套通用的最小验证环境按实际系统调整路径即可。3.1 安装 Node.js 并检查版本先确认机器上有没有 Node.js。打开终端执行node -v npm -v如果输出类似v18.20.0和10.x.x说明环境正常。如果提示命令不存在去 Node.js 官网下载 LTS 版本安装。建议使用 18 及以上版本因为后面的示例里会用一些比较新的数组方法旧版本可能出现语法不兼容。3.2 初始化项目目录新建一个测试目录用来放本文所有示例代码mkdir fp-demo cd fp-demo npm init -ynpm init -y会生成一个默认的 package.json这个文件不是必须的但如果后面要安装 lodash/fp 或 Ramda就需要它管理依赖。不装任何依赖也能跑通本文大部分示例。3.3 确定验证工具最简单的验证方式是直接写一个index.js用 Node 跑node index.js如果想看每一行中间结果可以用 console.log 观察或者在浏览器控制台里粘贴函数定义和执行代码。后面每一节的核心函数都会给出完整可执行的代码块读者复制到本地即可验证输出。需要注意端口和进程问题在这个纯函数教学场景里不涉及但如果读者的机器上装了其他占用终端进程的服务运行前建议先关闭或规划好端口避免干扰测试。4. 纯函数与不可变数据4.1 什么是纯函数纯函数有两个硬条件相同输入永远得到相同输出执行过程不产生副作用。副作用包括修改外部变量、写文件、发请求、打印日志、改变入参。下面这段代码很好地展示了纯函数与不纯函数的差异// 纯函数不依赖外部状态不修改任何外部数据 function add(a, b) { return a b; } // 不纯函数依赖外部变量 base执行结果不可预测 let base 10; function addBase(n) { return base n; } // 不纯函数修改了入参对象调用方数据被污染 function updateAge(user, newAge) { user.age newAge; // 副作用 return user; }在业务代码里最容易踩的坑就是第三种函数内部改了对象调用方拿到返回值以为拿到了“新数据”实际上原来的对象已经被改了。这个问题在多人协作时特别隐蔽排查时需要找到所有调用点才能确认是谁改了数据。4.2 用不可变数据替代原地修改JavaScript 的const只能保证变量名不能被重新绑定不能保证对象内部不被修改。要实现不可变更新最轻量的做法是用展开运算符创建新对象const user { name: Alice, age: 25, address: { city: Shanghai } }; // 正确浅拷贝 覆盖字段返回新对象 const updatedUser { ...user, age: 26 }; // 注意这是浅拷贝嵌套的 address 仍然是同一个引用 // 修改嵌套对象时需要逐层展开 const updatedUserDeep { ...user, address: { ...user.address, city: Beijing } }; console.log(user.age); // 25原对象未变 console.log(updatedUser.age); // 26数组也有同样的处理方式。往数组里加元素用[...arr, item]删元素用arr.filter(...)替换元素用arr.map(...)整体思路就是“每次返回新数组绝不原地 push、splice”。如果项目确实需要更严谨的不可变性再考虑 Immutable.js 或结构共享方案但绝大多数业务场景里展开运算符已经够用。判断一个改造是否成功有一个很笨但有效的验证方法在调用一个函数前后分别打印入参对象如果打印结果变了说明函数内部有副作用要么改函数要么明确告知调用方“这个函数会改数据”。把这条纪律立住调试成本会低很多。5. 高阶函数与数组批量操作高阶函数是指接收函数作为参数或返回函数的函数这是 JavaScript 函数式编程在日常代码里最常用的体现。数组三件套 map、filter、reduce 就是典型代表。5.1 map批量转换map 返回一个新数组长度和原数组相同每个元素是回调函数的返回值。适合做“一对一”的格式转换。const orders [ { id: 1, amount: 100, status: paid }, { id: 2, amount: 200, status: pending }, { id: 3, amount: 150, status: paid } ]; // 批量抽取金额 const amounts orders.map(o o.amount); console.log(amounts); // [100, 200, 150] // 批量转换展示格式 const formatted orders.map(o ({ orderId: #${o.id}, total: ${o.amount.toFixed(2)} })); console.log(formatted);5.2 filter筛选filter 返回一个新数组只包含回调返回真值的元素。适合做状态筛选、条件过滤。需要特别注意filter 不会修改原数组这意味着它可以安全地嵌套在更大的数据管道里。const paidOrders orders.filter(o o.status paid); console.log(paidOrders); // 只包含 id 为 1 和 3 的订单5.3 reduce聚合与分组reduce 是三个方法里最灵活也最容易用错的一个它的通用形式是对数组做“从左到右累计”。用途不只是求和还可以做分组、计数、转对象、扁平化。// 求和 const total orders.reduce((sum, o) sum o.amount, 0); console.log(total); // 450 // 按状态分组 const grouped orders.reduce((acc, o) { acc[o.status] acc[o.status] || []; acc[o.status].push(o); return acc; }, {}); console.log(grouped); // { paid: [order1, order3], pending: [order2] } // 数组转对象 const orderMap orders.reduce((acc, o) { acc[o.id] o; return acc; }, {}); console.log(orderMap[1]);reduce 使用中有一个高频错误是忘记传初始值。不传初始值时空数组会直接抛错 Reduce of empty array with no initial value非空数组则会把第一个元素当作初始值数据类型一旦不一致累计结果就不可控。所以写 reduce 务必始终给初始值并且初始值类型要和返回值类型保持一致。5.4 组合用法一条管道处理批量任务批量任务的典型场景是把筛选、转换、聚合串起来。函数式风格不会写三个 for 循环而是直接链式调用const paidTotal orders .filter(o o.status paid) .map(o o.amount) .reduce((sum, amount) sum amount, 0); console.log(paidTotal); // 250这段代码读起来就是业务描述“已支付的订单取金额求和”。中间不产生共享变量每一步的结果都是下一步的输入任何一个环节出问题都可以单独验证。这正是函数式编程在批量数据处理里的优势可读、可测、可组合。5.5 flatMap 与对象遍历处理嵌套数组时flatMap 比 map 加 flat 更直观。比如多个订单明细需要展开成单个商品条目const orderGroups [ { items: [apple, banana] }, { items: [orange] } ]; const allItems orderGroups.flatMap(g g.items); console.log(allItems); // [apple, banana, orange]对象批量处理则用 Object.entries 把对象转成数组处理完再转回去const prices { apple: 5, banana: 3 }; const discounted Object.fromEntries( Object.entries(prices).map(([name, price]) [name, price * 0.9]) ); console.log(discounted); // { apple: 4.5, banana: 2.7 }结合 Object.fromEntries对象的批量转换也可以做到不可变、可链式。这套组合覆盖面已经很大日常业务里的批量任务先想想能否用 map/filter/reduce 解决再去写 for 循环。6. 函数组合与柯里化6.1 手写 compose 与 pipe函数组合的核心思想是把多个单参数函数串成一条数据管道。compose 从右往左执行pipe 从左往右执行。pipe 读起来更像自然语言建议日常优先使用。const compose (...fns) x fns.reduceRight((acc, fn) fn(acc), x); const pipe (...fns) x fns.reduce((acc, fn) fn(acc), x); const trim s s.trim(); const toLowerCase s s.toLowerCase(); const addPrefix s [FP] ${s}; const formatTitle pipe(trim, toLowerCase, addPrefix); console.log(formatTitle( Hello World )); // [fp] hello world这段代码展示了组合的实质把“去空格”“转小写”“加前缀”三个小函数组装成一个新函数。每一个小函数都可以单独测试组装逻辑只有一行。改造旧代码时可以把一个大函数里的步骤抽成小函数再用 pipe 串起来可读性比一连串赋值语句高不少。6.2 柯里化与偏应用柯里化是把一个多参数函数改造成“逐次接收参数”的函数。偏应用是固定部分参数生成一个参数更少的新函数。两者都能提升函数复用性但要注意不是所有场景都适合柯里化过度柯里化反而会让调用代码难以理解。// 普通多参数函数 const multiply (a, b, c) a * b * c; // 柯里化版本 const curriedMultiply a b c a * b * c; console.log(curriedMultiply(2)(3)(4)); // 24 // 偏应用固定汇率生成转换函数 const createConverter rate amount amount * rate; const usdToCny createConverter(7.2); console.log(usdToCny(100)); // 720在这个例子里createConverter 返回一个新函数这种“工厂函数”模式在业务中很常见创建不同配置的格式化器、脱敏器、价格计算器等。柯里化的另一个实际用途是延迟执行和参数复用比如一个日志函数可以先传 level再传 message 和 data。6.3 改造过程式代码的示例下面是一段典型的过程式代码它把弹窗文案的生成逻辑写在一个大函数里// 改造前嵌套判断 中间变量 function buildMessage(user, order) { let name user.name.trim(); name name.toLowerCase(); let amountText ${order.amount.toFixed(2)}; let statusText order.status paid ? 已支付 : 待支付; return ${name} 的订单金额 ${amountText}状态${statusText}; }改用函数组合与柯里化后可以拆成多个可测小函数const formatName pipe( s s.trim(), s s.toLowerCase() ); const formatAmount amount ${amount.toFixed(2)}; const getStatusText status status paid ? 已支付 : 待支付; const buildMessage (user, order) ${formatName(user.name)} 的订单金额 ${formatAmount(order.amount)}状态${getStatusText(order.status)}; console.log(buildMessage( { name: Alice }, { amount: 100, status: paid } ));改造后formatName、formatAmount、getStatusText 都可以单独测试buildMessage 只是把三个纯函数的结果拼起来。以后改文案格式只需要改对应的小函数不用再去大函数里逐行找。7. 函数式异步与错误处理异步是 JavaScript 业务代码里绕不开的部分函数式思想同样适用。Promise 的 then 链本质上就是函数组合把“上一个操作的结果”传给“下一个操作”作为输入。保持 then 回调是纯函数能让异步流程更稳定。7.1 用纯函数组织异步流程// 模拟用户查询接口 const fetchUser id Promise.resolve({ id, name: Alice }); const formatUser user 用户 ${user.name}ID: ${user.id}; fetchUser(1) .then(formatUser) // 传入纯函数 .then(console.log); // 副作用推到最外层这里 then 接收到的是一个纯函数 formatUser而不是箭头函数加花哨逻辑。这样做的价值在于formatUser 可以脱离 Promise 直接测试异步流程只需要验证“数据是否按预期传入纯函数”。7.2 用函数式思路做安全 JSON 解析JSON.parse 会抛异常直接写在函数里会让函数产生隐式错误路径。更函数式的做法是返回一个带状态的结果对象由调用方决定如何处理错误const tryParse ( 
长河君 · 2026/8/30 3:47:48 · 阅读 1.2k JavaScript函数式编程实用指南：纯函数、组合与异步错误处理
JavaScript 函数式编程讲了很多年很多教程停留在“什么是纯函数”“什么是柯里化”的概念层真正落到业务代码里反而不知道怎么用。这次我们换个角度不绕概念直接看 JavaScript 函数式编程的实用方法哪些函数能直接改写现有业务代码、怎么在 Node.js 环境里跑起来、怎么用纯函数和不可变数据减少 bug、数组批量数据怎么用 map/filter/reduce 一把梭、异步场景如何用函数式思路组织错误处理。这篇文章的目标是让读者看完后能直接在自己的项目里动手。先说这个学习路线最值得关注的几个点。第一纯函数是 JavaScript 函数式编程的地基把“相同输入必然相同输出”这个约束立住单元测试和代码调试成本会明显下降。第二不可变数据配合展开运算符可以在不引入 Immutable.js 之类重量级依赖的情况下完成安全更新。第三高阶函数和数组方法组合能覆盖大部分列表筛选、转换、聚合、分组需求。第四函数组合与柯里化让代码从过程式“一步步执行”变成“一条管道处理”。第五Promise 本身就是函数式思想的异步版配合 compose/pipe 可以让异步流程更清晰。本文会带读者完成这些内容准备一个最小 Node.js 测试环境用纯函数改造一段带副作用的旧代码用 map/filter/reduce 实现批量订单数据处理手写 compose/pipe 和柯里化函数并验证效果在异步场景中做安全的 JSON 解析和错误处理最后给出性能观察方法和常见问题排查清单。适合写过 JavaScript、遇到 this 和闭包容易绕、想把数据处理写得稳定可测的前端或 Node 开发者。1. 核心能力速览先用一张表快速说明 JavaScript 函数式编程这个知识体系的核心能力方便判断这套方法适不适合当前项目。能力项说明核心概念纯函数、不可变数据、高阶函数、函数组合、柯里化运行环境Node.js 14建议 18现代浏览器同样适用主要工具函数map、filter、reduce、flatMap、Object.entries、Promise无需额外依赖只用原生 JavaScript 即可实现大部分函数式能力批量数据处理列表映射、筛选、聚合、分组、对象转换异步支持Promise 链、async/await、函数式错误处理可测试性纯函数可直接断言无需 mock 复杂环境适用场景数据处理、状态管理、业务规则拆分、单元测试需要强调一点这里说的“无需额外依赖”针对的是基础能力。生产项目如果要用更严谨的不可变数据结构、Maybe/Either 这类容器或者要用 lodash/fp、Ramda 这类函数式工具库仍然需要按项目情况引入依赖。文章后面会给出原生实现和工具库两条路线。2. 适用场景与使用边界JavaScript 函数式编程适合谁首先是中大型前端项目的业务逻辑层。这类项目最怕共享状态失控一个对象被多个模块改来改去排查问题要翻遍调用链。换成纯函数和不可变数据后每个函数只对输入负责输出可预测定位问题就变成“找哪一段输入不对”。其次是数据处理密集的场景比如报表聚合、列表筛选、表单格式化这些用数组高阶函数能写得比 for 循环更短更清晰。再次是单元测试敏感的项目纯函数不需要 mock 全局对象不需要模拟时间直接传参断言结果。能解决什么问题核心是降低认知负担和减少副作用带来的隐性 bug。过程式代码经常把“取数据—改数据—存数据”混在一个函数里函数式风格强制你把它拆成“输入—转换—输出”的管道每一段都可以单独测试。批量任务方面一个订单列表可以先 filter 筛状态、再 map 换结构、最后 reduce 做统计整个流程读起来像业务描述本身。不适合什么场景第一极端性能敏感的热路径。函数式风格大量创建新数组、新对象闭包会带来额外调用开销在每帧几万次计算的地方硬套函数式往往得不偿失。第二需要原地更新大对象的老项目如果代码库里到处是对对象的引用改成不可变更新可能引入更多兼容问题。第三团队不熟悉函数式语法时不要激进重构否则会出现“一个人写得开心、一群人看得痛苦”的局面。还有个边界必须说清楚函数式编程不是消灭副作用而是约束副作用。网络请求、读写文件、打印日志、更新 DOM这些操作必然是副作用不可能变成纯函数。正确做法是把副作用推到一个薄薄的外层让核心业务逻辑保持纯函数外层负责“获取数据、调用纯函数、提交结果”。另外涉及用户数据的函数式处理同样要注意隐私边界比如日志里不要打印完整手机号、身份证号、银行卡号接口返回的敏感字段要在纯函数内部脱敏后再传给下一层。版权和合规方面如果函数库来自 npm 第三方包要注意开源协议是否允许商用这一点在小团队里经常被忽略。3. 环境准备与前置条件这部分的定位是“开箱即测”不需要搭建复杂工程。下面是一套通用的最小验证环境按实际系统调整路径即可。3.1 安装 Node.js 并检查版本先确认机器上有没有 Node.js。打开终端执行node -v npm -v如果输出类似v18.20.0和10.x.x说明环境正常。如果提示命令不存在去 Node.js 官网下载 LTS 版本安装。建议使用 18 及以上版本因为后面的示例里会用一些比较新的数组方法旧版本可能出现语法不兼容。3.2 初始化项目目录新建一个测试目录用来放本文所有示例代码mkdir fp-demo cd fp-demo npm init -ynpm init -y会生成一个默认的 package.json这个文件不是必须的但如果后面要安装 lodash/fp 或 Ramda就需要它管理依赖。不装任何依赖也能跑通本文大部分示例。3.3 确定验证工具最简单的验证方式是直接写一个index.js用 Node 跑node index.js如果想看每一行中间结果可以用 console.log 观察或者在浏览器控制台里粘贴函数定义和执行代码。后面每一节的核心函数都会给出完整可执行的代码块读者复制到本地即可验证输出。需要注意端口和进程问题在这个纯函数教学场景里不涉及但如果读者的机器上装了其他占用终端进程的服务运行前建议先关闭或规划好端口避免干扰测试。4. 纯函数与不可变数据4.1 什么是纯函数纯函数有两个硬条件相同输入永远得到相同输出执行过程不产生副作用。副作用包括修改外部变量、写文件、发请求、打印日志、改变入参。下面这段代码很好地展示了纯函数与不纯函数的差异// 纯函数不依赖外部状态不修改任何外部数据 function add(a, b) { return a b; } // 不纯函数依赖外部变量 base执行结果不可预测 let base 10; function addBase(n) { return base n; } // 不纯函数修改了入参对象调用方数据被污染 function updateAge(user, newAge) { user.age newAge; // 副作用 return user; }在业务代码里最容易踩的坑就是第三种函数内部改了对象调用方拿到返回值以为拿到了“新数据”实际上原来的对象已经被改了。这个问题在多人协作时特别隐蔽排查时需要找到所有调用点才能确认是谁改了数据。4.2 用不可变数据替代原地修改JavaScript 的const只能保证变量名不能被重新绑定不能保证对象内部不被修改。要实现不可变更新最轻量的做法是用展开运算符创建新对象const user { name: Alice, age: 25, address: { city: Shanghai } }; // 正确浅拷贝 覆盖字段返回新对象 const updatedUser { ...user, age: 26 }; // 注意这是浅拷贝嵌套的 address 仍然是同一个引用 // 修改嵌套对象时需要逐层展开 const updatedUserDeep { ...user, address: { ...user.address, city: Beijing } }; console.log(user.age); // 25原对象未变 console.log(updatedUser.age); // 26数组也有同样的处理方式。往数组里加元素用[...arr, item]删元素用arr.filter(...)替换元素用arr.map(...)整体思路就是“每次返回新数组绝不原地 push、splice”。如果项目确实需要更严谨的不可变性再考虑 Immutable.js 或结构共享方案但绝大多数业务场景里展开运算符已经够用。判断一个改造是否成功有一个很笨但有效的验证方法在调用一个函数前后分别打印入参对象如果打印结果变了说明函数内部有副作用要么改函数要么明确告知调用方“这个函数会改数据”。把这条纪律立住调试成本会低很多。5. 高阶函数与数组批量操作高阶函数是指接收函数作为参数或返回函数的函数这是 JavaScript 函数式编程在日常代码里最常用的体现。数组三件套 map、filter、reduce 就是典型代表。5.1 map批量转换map 返回一个新数组长度和原数组相同每个元素是回调函数的返回值。适合做“一对一”的格式转换。const orders [ { id: 1, amount: 100, status: paid }, { id: 2, amount: 200, status: pending }, { id: 3, amount: 150, status: paid } ]; // 批量抽取金额 const amounts orders.map(o o.amount); console.log(amounts); // [100, 200, 150] // 批量转换展示格式 const formatted orders.map(o ({ orderId: #${o.id}, total: ${o.amount.toFixed(2)} })); console.log(formatted);5.2 filter筛选filter 返回一个新数组只包含回调返回真值的元素。适合做状态筛选、条件过滤。需要特别注意filter 不会修改原数组这意味着它可以安全地嵌套在更大的数据管道里。const paidOrders orders.filter(o o.status paid); console.log(paidOrders); // 只包含 id 为 1 和 3 的订单5.3 reduce聚合与分组reduce 是三个方法里最灵活也最容易用错的一个它的通用形式是对数组做“从左到右累计”。用途不只是求和还可以做分组、计数、转对象、扁平化。// 求和 const total orders.reduce((sum, o) sum o.amount, 0); console.log(total); // 450 // 按状态分组 const grouped orders.reduce((acc, o) { acc[o.status] acc[o.status] || []; acc[o.status].push(o); return acc; }, {}); console.log(grouped); // { paid: [order1, order3], pending: [order2] } // 数组转对象 const orderMap orders.reduce((acc, o) { acc[o.id] o; return acc; }, {}); console.log(orderMap[1]);reduce 使用中有一个高频错误是忘记传初始值。不传初始值时空数组会直接抛错 Reduce of empty array with no initial value非空数组则会把第一个元素当作初始值数据类型一旦不一致累计结果就不可控。所以写 reduce 务必始终给初始值并且初始值类型要和返回值类型保持一致。5.4 组合用法一条管道处理批量任务批量任务的典型场景是把筛选、转换、聚合串起来。函数式风格不会写三个 for 循环而是直接链式调用const paidTotal orders .filter(o o.status paid) .map(o o.amount) .reduce((sum, amount) sum amount, 0); console.log(paidTotal); // 250这段代码读起来就是业务描述“已支付的订单取金额求和”。中间不产生共享变量每一步的结果都是下一步的输入任何一个环节出问题都可以单独验证。这正是函数式编程在批量数据处理里的优势可读、可测、可组合。5.5 flatMap 与对象遍历处理嵌套数组时flatMap 比 map 加 flat 更直观。比如多个订单明细需要展开成单个商品条目const orderGroups [ { items: [apple, banana] }, { items: [orange] } ]; const allItems orderGroups.flatMap(g g.items); console.log(allItems); // [apple, banana, orange]对象批量处理则用 Object.entries 把对象转成数组处理完再转回去const prices { apple: 5, banana: 3 }; const discounted Object.fromEntries( Object.entries(prices).map(([name, price]) [name, price * 0.9]) ); console.log(discounted); // { apple: 4.5, banana: 2.7 }结合 Object.fromEntries对象的批量转换也可以做到不可变、可链式。这套组合覆盖面已经很大日常业务里的批量任务先想想能否用 map/filter/reduce 解决再去写 for 循环。6. 函数组合与柯里化6.1 手写 compose 与 pipe函数组合的核心思想是把多个单参数函数串成一条数据管道。compose 从右往左执行pipe 从左往右执行。pipe 读起来更像自然语言建议日常优先使用。const compose (...fns) x fns.reduceRight((acc, fn) fn(acc), x); const pipe (...fns) x fns.reduce((acc, fn) fn(acc), x); const trim s s.trim(); const toLowerCase s s.toLowerCase(); const addPrefix s [FP] ${s}; const formatTitle pipe(trim, toLowerCase, addPrefix); console.log(formatTitle( Hello World )); // [fp] hello world这段代码展示了组合的实质把“去空格”“转小写”“加前缀”三个小函数组装成一个新函数。每一个小函数都可以单独测试组装逻辑只有一行。改造旧代码时可以把一个大函数里的步骤抽成小函数再用 pipe 串起来可读性比一连串赋值语句高不少。6.2 柯里化与偏应用柯里化是把一个多参数函数改造成“逐次接收参数”的函数。偏应用是固定部分参数生成一个参数更少的新函数。两者都能提升函数复用性但要注意不是所有场景都适合柯里化过度柯里化反而会让调用代码难以理解。// 普通多参数函数 const multiply (a, b, c) a * b * c; // 柯里化版本 const curriedMultiply a b c a * b * c; console.log(curriedMultiply(2)(3)(4)); // 24 // 偏应用固定汇率生成转换函数 const createConverter rate amount amount * rate; const usdToCny createConverter(7.2); console.log(usdToCny(100)); // 720在这个例子里createConverter 返回一个新函数这种“工厂函数”模式在业务中很常见创建不同配置的格式化器、脱敏器、价格计算器等。柯里化的另一个实际用途是延迟执行和参数复用比如一个日志函数可以先传 level再传 message 和 data。6.3 改造过程式代码的示例下面是一段典型的过程式代码它把弹窗文案的生成逻辑写在一个大函数里// 改造前嵌套判断 中间变量 function buildMessage(user, order) { let name user.name.trim(); name name.toLowerCase(); let amountText ${order.amount.toFixed(2)}; let statusText order.status paid ? 已支付 : 待支付; return ${name} 的订单金额 ${amountText}状态${statusText}; }改用函数组合与柯里化后可以拆成多个可测小函数const formatName pipe( s s.trim(), s s.toLowerCase() ); const formatAmount amount ${amount.toFixed(2)}; const getStatusText status status paid ? 已支付 : 待支付; const buildMessage (user, order) ${formatName(user.name)} 的订单金额 ${formatAmount(order.amount)}状态${getStatusText(order.status)}; console.log(buildMessage( { name: Alice }, { amount: 100, status: paid } ));改造后formatName、formatAmount、getStatusText 都可以单独测试buildMessage 只是把三个纯函数的结果拼起来。以后改文案格式只需要改对应的小函数不用再去大函数里逐行找。7. 函数式异步与错误处理异步是 JavaScript 业务代码里绕不开的部分函数式思想同样适用。Promise 的 then 链本质上就是函数组合把“上一个操作的结果”传给“下一个操作”作为输入。保持 then 回调是纯函数能让异步流程更稳定。7.1 用纯函数组织异步流程// 模拟用户查询接口 const fetchUser id Promise.resolve({ id, name: Alice }); const formatUser user 用户 ${user.name}ID: ${user.id}; fetchUser(1) .then(formatUser) // 传入纯函数 .then(console.log); // 副作用推到最外层这里 then 接收到的是一个纯函数 formatUser而不是箭头函数加花哨逻辑。这样做的价值在于formatUser 可以脱离 Promise 直接测试异步流程只需要验证“数据是否按预期传入纯函数”。7.2 用函数式思路做安全 JSON 解析JSON.parse 会抛异常直接写在函数里会让函数产生隐式错误路径。更函数式的做法是返回一个带状态的结果对象由调用方决定如何处理错误const tryParse (