组合函数管道处理数据流的核心是拆解为单一职责纯函数并用pipe串联:每步只做一件事、无副作用;支持柯里化预置参数和asyncPipe处理异步流程。

用组合函数管道处理复杂数据流转换,核心是把大逻辑拆成小函数、再按顺序串起来——数据从左到右自然流动,每一步只干一件事,改起来清楚,测起来方便。
拆解为单一职责的纯函数
先别急着连,先把每个处理环节写成独立、无副作用的函数:
- 输入明确:每个函数只接收一个参数(比如字符串、对象或数组),返回同类型或兼容类型的数据
-
职责聚焦:比如
trim只去空格,toLower只转小写,validateEmail只校验格式,不混业务逻辑 - 避免副作用:不修改原数组、不发请求、不读写 localStorage——让函数可预测、可复现
用 pipe 串联形成清晰流水线
手写一个轻量 pipe 就够用,执行方向从左到右,符合阅读习惯:
例如处理用户输入:
立即学习“Java免费学习笔记(深入)”;
const cleanInput = pipe(trim, toLower, removeExtraSpaces, escapeHtml);-
cleanInput(" <script>XSS</script> Hello World ")→"hello-world"
每一步输出直接喂给下一步,不用中间变量,也不用嵌套调用。
配合柯里化预置配置,提升复用性
遇到带参数的逻辑(如按字段排序、按状态过滤),用柯里化提前固定配置:
const filterBy = key => value => arr => arr.filter(item => item[key] === value);const sortBy = key => arr => [...arr].sort((a, b) => a[key] - b[key]);- 再放进管道:
pipe(filterBy('active')(true), sortBy('createdAt'), take(10))
这样 filterBy('active')(true) 就是一个可复用的过滤器,和别的函数一样塞进 pipe 里。
异步流程也照常走管道,只需换 asyncPipe
API 请求链也能管道化,关键在于让每个函数返回 Promise,并用异步 reduce:
const asyncPipe = (fns) => (x) => fns.reduce(async (acc, fn) => fn(await acc), x);const loadUserProfile = asyncPipe(fetchUserById, fetchUserProfile, cacheLocally);- 调用
loadUserProfile(123)会依次等待三步完成,错误统一在最外层 try/catch
注意:所有中间函数必须返回 Promise,否则 await 会出错。


















