高阶操作与管道组合

JavaScript 进阶

Site Owner

发布于 2026-05-21

系统讲解纯函数原则、柯里化实现与应用、偏函数应用、函数组合两种方向及Point-free风格的适用边界

高阶操作与管道组合

函数组合（Composition）和组合子（Combinators）是函数式编程的核心模式。通过将小型、纯粹的函数组合成复杂操作，可以构建高度可复用、可测试的代码。本文覆盖 pipe/compose、柯里化、偏函数、Transducers 等高级组合技术，并探讨 TC39 Pipeline Operator 提案的最新进展。

1. 函数组合基础

// 代码示例 1：组合的动机
// 命令式
function processUser(user) {
  const validated = validate(user);
  const normalized = normalize(validated);
  const enriched = enrich(normalized);
  return enriched;
}


 processUser = (validate, normalize, enrich);

// 代码示例 2：pipe 和 compose 实现
// pipe: 从左到右
function pipe(...fns) {
  if (fns.length === 0) return (x) => x;
  if (fns.length === 1) return fns[0];
  
  return function piped(...args) {
    let result = fns[0].apply(this, args);
    for (let i = 1; i < fns.length; i++) {
      result = fns[i](result);
    }
    return result;
  };
}

// compose: 从右到左（数学传统 f∘g）
function compose(...fns) {
  return pipe(...fns.reverse());
}

// 使用
const processString = pipe(
  str => str.trim(),
  str => str.toLowerCase(),
  str => str.replace(/\s+/g, '-'),
  str => str.slice(0, 50)
);

console.log(processString('  Hello World  ')); // 'hello-world'

// 代码示例 3：支持异步函数的 pipe
function asyncPipe(...fns) {
  return async function(...args) {
    let result = await fns[0].apply(this, args);
    for (let i = 1; i < fns.length; i++) {
      result = await fns[i](result);
    }
    return result;
  };
}

const processOrder = asyncPipe(
  validateOrder,
  async (order) => await checkInventory(order),
  async (order) => await processPayment(order),
  async (order) => await sendConfirmation(order)
);

// 代码示例 4：自动柯里化
function curry(fn) {
  const arity = fn.length;
  
  return function curried(...args) {
    if (args.length >= arity) {
      return fn.apply(this, args);
    }
    return function(...moreArgs) {
      return curried.apply(this, [...args, ...moreArgs]);
    };
  };
}

// 使用
const add = curry((a, b, c) => a + b + c);
console.log(add(1)(2)(3));     // 6
console.log(add(1, 2)(3));     // 6
console.log(add(1)(2, 3));     // 6
console.log(add(1, 2, 3));     // 6

// 偏应用
const add10 = add(10);
const add10and20 = add(10, 20);
console.log(add10(5, 3));      // 18
console.log(add10and20(3));    // 33

// 代码示例 5：支持占位符的 curry
const _ = Symbol('placeholder');

function curryWithPlaceholder(fn) {
  const arity = fn.length;
  
  return function curried(...args) {
    const complete = args.length >= arity && 
      args.slice(0, arity).every(a => a !== _);
    
    if (complete) return fn(...args);
    
    return (...newArgs) => {
      const merged = args.map(a => a === _ && newArgs.length ? newArgs.shift() : a);
      return curried(...merged, ...newArgs);
    };
  };
}

const divide = curryWithPlaceholder((a, b) => a / b);
const divideBy2 = divide(_, 2);
console.log(divideBy2(10)); // 5

// 代码示例 6：经典组合子
// Identity
const identity = x => x;

// Constant (K combinator)
const constant = x => () => x;

// Tap (副作用)
const tap = fn => x => { fn(x); return x; };

// Flip (交换参数)
const flip = fn => (a, b) => fn(b, a);

// Once (执行一次)
const once = fn => {
  let called = false, result;
  return (...args) => {
    if (!called) { called = true; result = fn(...args); }
    return result;
  };
};

// Not (逻辑取反)
const not = fn => (...args) => !fn(...args);

// When (条件执行)
const when = (pred, fn) => x => pred(x) ? fn(x) : x;

// Unless (反向条件)
const unless = (pred, fn) => x => pred(x) ? x : fn(x);

// 使用组合子构建处理管道
const processItems = pipe(
  tap(items => console.log(`Processing ${items.length} items`)),
  items => items.filter(not(item => item.deleted)),
  items => items.map(when(
    item => item.price > 100,
    item => ({ ...item, discounted: true })
  ))
);

// 代码示例 7：Transducer 模式
// Transducer = 可组合的 reducer 转换器
// 优势：避免中间数组创建，单次遍历完成多步转换

// 基础 transducer 工厂
const mapping = (fn) => (reducer) => (acc, val) => reducer(acc, fn(val));
const filtering = (pred) => (reducer) => (acc, val) => pred(val) ? reducer(acc, val) : acc;
const taking = (n) => (reducer) => {
  let count = 0;
  return (acc, val) => ++count <= n ? reducer(acc, val) : acc; // 简化版
};

// 组合 transducers
const xform = compose(
  filtering(x => x % 2 === 0),  // 先过滤偶数
  mapping(x => x * x),          // 再平方
  taking(3)                      // 取前3个
);

// 应用到数组
function transduce(xform, reducer, init, collection) {
  const xReducer = xform(reducer);
  return collection.reduce(xReducer, init);
}

const result = transduce(
  xform,
  (acc, val) => [...acc, val],
  [],
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
);
console.log(result); // [4, 16, 36]

// 代码示例 8：Pipeline Operator (Stage 2)
// 提案语法（尚未正式纳入标准）

// Hack-style pipeline (当前提案方向)
// const result = value |> fn1(%) |> fn2(%) |> fn3(%);

// 模拟实现
function pipeline(value, ...steps) {
  return steps.reduce((acc, step) => step(acc), value);
}

const result = pipeline(
  '  Hello, World!  ',
  s => s.trim(),
  s => s.toLowerCase(),
  s => s.split(' '),
  words => words.map(w => w[0].toUpperCase() + w.slice(1)),
  words => words.join(' ')
);
console.log(result); // 'Hello, World!'

// 代码示例 9：Pointfree（无参数风格）
// 有参数（point）风格
const getNames = users => users.map(user => user.name);

// 无参数（pointfree）风格
const prop = key => obj => obj[key];
const map = fn => arr => arr.map(fn);
const getNamesPointfree = map(prop('name'));

// 更多 pointfree 工具
const filter = pred => arr => arr.filter(pred);
const reduce = (fn, init) => arr => arr.reduce(fn, init);
const sort = comparator => arr => [...arr].sort(comparator);
const join = separator => arr => arr.join(separator);
const split = separator => str => str.split(separator);

// 组合使用
const getActiveUserEmails = pipe(
  filter(prop('active')),
  map(prop('email')),
  sort((a, b) => a.localeCompare(b)),
  join(', ')
);

function composeMiddleware(...middlewares) {
  return function(req, res, next) {
    let index = -1;
    
    function dispatch(i) {
      if (i <= index) throw new Error('next() called multiple times');
      index = i;
      
      const middleware = middlewares[i];
      if (!middleware) return next();
      
      try {
        middleware(req, res, () => dispatch(i + 1));
      } catch (err) {
        next(err);
      }
    }
    
    dispatch(0);
  };
}

const protected = composeMiddleware(
  authenticate,
  authorize('admin'),
  rateLimit(100),
  validateBody(schema)
);

app.post('/api/users', protected, createUser);

const transformUserData = pipe(
  // 阶段1：清洗
  tap(data => console.log(`Raw records: ${data.length}`)),
  filter(record => record.email && record.name),
  
  // 阶段2：标准化
  map(pipe(
    record => ({ ...record, email: record.email.toLowerCase().trim() }),
    record => ({ ...record, name: record.name.trim() }),
    record => ({ ...record, createdAt: new Date(record.createdAt) })
  )),
  
  // 阶段3：去重
  records => [...new Map(records.map(r => [r.email, r])).values()],
  
  // 阶段4：排序
  sort((a, b) => b.createdAt - a.createdAt),
  
  tap(data => console.log(`Clean records: ${data.length}`))
);

const isString = x => typeof x === 'string';
const isNumber = x => typeof x === 'number';
const minLength = min => s => s.length >= min;
const maxLength = max => s => s.length <= max;
const matches = regex => s => regex.test(s);
const inRange = (min, max) => n => n >= min && n <= max;

// 组合验证规则
const validate = (rules) => (value) => {
  const errors = [];
  for (const [name, rule] of Object.entries(rules)) {
    if (!rule(value)) errors.push(name);
  }
  return errors.length === 0 ? { valid: true } : { valid: false, errors };
};

const validateUsername = validate({
  'Must be a string': isString,
  'Min 3 characters': minLength(3),
  'Max 20 characters': maxLength(20),
  'Alphanumeric only': matches(/^[a-zA-Z0-9_]+$/)
});

console.log(validateUsername('alice_123'));  // { valid: true }
console.log(validateUsername('ab'));         // { valid: false, errors: ['Min 3 characters'] }

组合模式	描述	适用场景
pipe	从左到右组合	数据处理管道
compose	从右到左组合	数学风格组合
curry	逐参数应用	配置化函数
partial	固定部分参数	工厂函数
transducer	可组合的 reducer	大数据集变换

组合子	签名	用途
identity	`a → a`	默认处理
constant	`a → () → a`	返回固定值
tap	`(a→void) → a → a`	副作用
flip	`(a,b→c) → (b,a→c)`	参数翻转
not	`(a→bool) → (a→bool)`	谓词取反

高阶操作与管道组合

高阶操作与管道组合

目录

1. 函数组合基础

2. pipe 与 compose

异步 pipe

3. 柯里化与偏应用

占位符柯里化

4. 常用组合子

5. Transducers

6. Pipeline Operator 提案

7. Pointfree 风格

8. 实战案例

实战案例 1：Express 中间件组合

实战案例 2：数据转换管道

实战案例 3：配置化验证器

9. 深度追问

Q1：函数组合的调试困难如何解决？

Q2：柯里化函数的性能影响？

Q3：Transducers 何时优于链式调用？

10. 总结表格