当前位置:首页 > JavaScript

函数柯里化 js实现

2026-01-31 05:44:19JavaScript

函数柯里化的概念

柯里化(Currying)是一种将多参数函数转换为一系列单参数函数的技术。通过柯里化,可以将一个接受多个参数的函数拆分为多个嵌套的函数,每个函数只接受一个参数并返回一个新函数,直到所有参数被收集完毕并执行最终计算。

基本实现方法

以下是一个简单的柯里化函数实现示例,支持固定参数数量的函数:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      };
    }
  };
}

使用示例:

函数柯里化 js实现

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 输出 6

支持占位符的柯里化

某些场景需要更灵活的柯里化,例如允许跳过某些参数(通过占位符暂存位置)。以下是一个支持占位符的实现:

const _ = Symbol('placeholder');

function curryWithPlaceholder(fn) {
  return function curried(...args) {
    const complete = args.length >= fn.length && !args.includes(_);
    if (complete) {
      return fn.apply(this, args);
    } else {
      return function(...nextArgs) {
        const mergedArgs = args.map(arg => arg === _ && nextArgs.length ? nextArgs.shift() : arg);
        return curried.apply(this, [...mergedArgs, ...nextArgs]);
      };
    }
  };
}

使用示例:

函数柯里化 js实现

function multiply(a, b, c) {
  return a * b * c;
}

const curriedMultiply = curryWithPlaceholder(multiply);
console.log(curriedMultiply(_, 2)(1)(3)); // 输出 6(1 * 2 * 3)

无限参数的柯里化

对于参数数量不固定的函数(如add(1)(2)(3)...),需通过显式调用(如.value())触发计算:

function infiniteCurry(fn) {
  let accumulatedArgs = [];
  const wrapper = function(...args) {
    accumulatedArgs.push(...args);
    return wrapper;
  };
  wrapper.value = function() {
    const result = accumulatedArgs.reduce(fn);
    accumulatedArgs = [];
    return result;
  };
  return wrapper;
}

使用示例:

const add = infiniteCurry((a, b) => a + b);
console.log(add(1)(2)(3).value()); // 输出 6

实际应用场景

  • 参数复用:提前固定部分参数(如配置项),后续只需传递动态参数。
  • 延迟执行:分步传递参数,直到满足条件才触发最终计算。
  • 函数组合:与compose结合,构建可读性更高的流水线操作。

注意事项

  • 原函数的参数长度(fn.length)需明确,否则需手动指定参数数量。
  • 箭头函数无argumentslength属性,可能影响柯里化行为。
  • 性能敏感场景需谨慎使用,嵌套函数调用可能带来额外开销。

标签: 函数柯里
分享给朋友:

相关文章

jquery 函数

jquery 函数

jQuery 函数基础 jQuery 是一个快速、简洁的 JavaScript 库,通过封装原生 JavaScript 功能简化 DOM 操作、事件处理、动画等。核心函数 $() 或 jQuery()…

vue实现函数曲线

vue实现函数曲线

Vue 实现函数曲线的方法 在 Vue 中实现函数曲线通常需要结合 HTML5 的 Canvas 或 SVG 技术,以及 JavaScript 的数学计算能力。以下是几种常见的方法: 使用 Canv…

vue防抖函数实现

vue防抖函数实现

防抖函数原理 防抖(Debounce)是一种限制函数频繁调用的技术,在事件被触发后延迟执行,若在延迟时间内再次触发,则重新计时。适用于输入框搜索、窗口大小调整等场景。 Vue 中实现防抖的三种方式…

react函数组件如何更新

react函数组件如何更新

React 函数组件更新方法 使用 useState Hook 通过 useState Hook 可以定义组件的状态,并触发重新渲染。useState 返回一个状态值和一个更新状态的函数。调用更新函数…

react如何刷新函数组件

react如何刷新函数组件

刷新函数组件的方法 在React中,函数组件的刷新通常通过状态更新或外部触发来实现。以下是几种常见的方法: 使用useState触发重新渲染 通过更新状态变量强制组件重新渲染。React会在状态变化…

react如何控制函数组件更新

react如何控制函数组件更新

控制函数组件更新的方法 在React中,函数组件的更新通常由状态(state)或属性(props)的变化触发。以下是几种常见的控制函数组件更新的方法: 使用React.memo进行浅比较 React…