JavaScript 函数柯里化的应用场景

什么是函数柯里化?

函数柯里化就将一个多参数的函数转换为只能接收一个参数的函数。通过柯里化,可以将函数的参数逐步应用,形成一个参数序列,使得函数的调用更加灵活,方便参数的复用和定制。

简单来说就是简化函数的参数接收,将多个参数尽可能的变少

简单示例

javascript 复制代码
// 普通的加法函数
function add(x, y) {
  return x + y;
}
console.log(add(2, 3)) // 输出 5

// 使用柯里化转换的加法函数
function curryAdd(x) {
  return function(y) {
    return x + y;
  }
}

const addTwo = curryAdd(2);
console.log(addTwo(3)); // 输出 5

大家可能会觉得这样做多此一举,直接传2个参数不更好吗,根据这个代码来说确实如此。

但有些场景使用函数柯里化就显得非常 Nice

应用场景

参数冗余

常规实现:参数过于冗余

javascript 复制代码
function url(proto, host, patch) {
  return `${proto}${host}${patch}`
}

url('https://', 'liuyuyang.net', '/api/get/1')
url('https://', 'liuyuyang.net', '/api/post')

柯里化实现:减少参数冗余

javascript 复制代码
function url(proto, host) {
  return function (patch) {
    return `${proto}${host}${patch}`
  }
}

const newUrl = url('https://', 'liuyuyang.net')
newUrl('/api/get/1')
newUrl('/api/post')

延迟执行

javascript 复制代码
function fn() {
  console.log("在执行内部函数之前做一些事情");

  return function () {
    // 代码逻辑
  }
}

const newFn = fn()
newFn()

函数柯里化在函数式编程中非常常见,它能够提高代码的可读性、可维护性和可复用性,使代码更加灵活和模块化。

相关推荐
2401_860494703 分钟前
如何在React Native中,开发一个类似于鸿蒙组件(Hong Kong component)的NoticeBar(通知栏)组件呢?
javascript·react native·react.js·ecmascript·kong·harmonyos
qq_419854054 分钟前
vant组件封装
前端·javascript·vue.js
渔舟唱晚@6 分钟前
从原理到实现:基于 Y.js 和 Tiptap 的实时在线协同编辑器全解析
开发语言·javascript·编辑器
Boop_wu8 分钟前
[Java EE] 网络编程套接字
开发语言·单片机·php
亮子AI9 分钟前
chart.js 雷达图顶部标题怎样消除?
开发语言·前端·javascript·chart.js
兩尛9 分钟前
查找接口成功率最优时间段 (c卷)
c语言·开发语言·算法
0和1的舞者11 分钟前
《Spring Bean&DI 通关笔记:从定义到注入的全场景避坑指南》
java·开发语言·学习·spring·ioc·di·web
tryxr11 分钟前
synchronized
java·开发语言·锁机制·锁升级·synchronized 锁
_OP_CHEN12 分钟前
【从零开始的Qt开发指南】(八)Qt 常用控件之显示类控件(上):Label 与 LCD Number 实战指南
开发语言·c++·qt·前端开发·图形化界面·qt常用控件·企业级组件
哟哟耶耶13 分钟前
vue3-Pinia Vue3状态管理库
前端·javascript·vue.js