JS 偏函数、函数柯里化~

简介: 该文章介绍了JavaScript中偏函数和函数柯里化的概念、实现方法和使用场景,通过代码示例展示了如何创建预设参数的函数以及如何将多参数函数转换成单参数函数的链式调用。

偏函数

首先 我们看下面的代码

 methods: {
   
    changFun(newCurry, oldCurry) {
   
      return newCurry + oldCurry;
    },
    testFun() {
   
      let a = this.changFun.bind(null, 12);  //bind函数实现机制就是柯里化的封装
      console.log(a(4));
    }
  },
  mounted() {
   
    this.testFun();
  }
 methods: {
   
    changFun(newCurry ) {
   
      return function(oldCurry) {
   
        return newCurry + oldCurry;
      };
    },
    testFun() {
   
      let a = this.changFun(12);
      console.log(a(4));
    }
  },
  mounted() {
   
    this.testFun();
    this.postUrlList();
  }

上面两端代码都是可以实现偏函数:
偏函数:带有预设值形参的函数,这样我们可以吧changFun函数想成一个接口,第一个参数我们传入定义好的,重新生成一个新的函数,调用的时候传入第二个参数。
通过设定参数的默认值,可以降低函数调用的难度
比如下面的例子我们写一个 js 文件:
FunApi.js

let DoThisFun = (reg) => {
   
    return (str) => {
   
        return reg.test(str)
    }
}
//判断是否为 全字母
let isStringFun = DoThisFun(/[a-z]+/g)
//判断是否为 全数字
let isNumberFun = DoThisFun(/d+/g)

export default {
    isStringFun, isNumberFun }

我们在vue组件中导入一下

import FunApi from "../assets/js/FunApi.js";

在mounted中调用方法

  methods: {
   
    FunApiTest() {
   
      console.log(FunApi.isStringFun("123"));
      console.log(FunApi.isStringFun("abc"));
      console.log(FunApi.isNumberFun("123"));
      console.log(FunApi.isNumberFun("abc"));
    }
  },

  mounted() {
   
    this.FunApiTest();
  }

在这里插入图片描述
FunApi.js中的DoThisFun 方法相当于我们的一个接口函数,作用就是,把一个函数的某些参数给固定住(也就是设置默认值),返回一个新的函数,调用这个新函数会更简单。我们可以传入一系列的正则表达式,定义成新的验证方法,在页面直接使用返回是否符合验证,当然我们写好后需要导出才能在页面用。

为什么我们通常使用偏函数?
这里我们偏函数的好处是:
(1)通过创建一个名称易懂的独立函数(double,triple等),调用时无需每次传入第一个参数,因为第一个参数通过bind提供了固定值。
(2)另一种使用偏函数情况是,当我们有一个很通用的函数,为了方便提供一个较常用的变体。举例,我们有一个函数send(from, to, text),那么使用偏函数可以创建一个从当前用户发送的变体:sendTo(to, text)

函数柯里化

维基百科上说道:柯里化,英语:Currying(果然是满满的英译中的既视感),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

将多参数函数变成单参数的多个函数依次调用,形成一个闭包空间,能一直使用第一次传入的参数,并且返回一个参数,后面执行的就是返回的参数。

    //普通 函数
    changFun1(newCurry ,oldCurry) {
   
        return newCurry + oldCurry;
      },
      //柯里化函数
    changFun2(newCurry ) {
   
      return function(oldCurry) {
   
        return newCurry + oldCurry;
      },

方便了函数封装。

下面看一个例子

       //需求 求和 
        // add(1)(2)  ==> 3
        // add(1)(2,3)(4,5)  ==> 15
        // add(1)(2)(3,5,8)(2)  ==> 21

        //实现一个add函数求和

        //首先看到这个我们,我们会看到调用了不定次函数,我们可以用闭包实现

        function add(...num1) {
   
            inner.toString = ()=>{
   
              return   num1.reduce((num,item)=>{
   
                    return num+=item
                },0)
            }
            function inner(...num2) {
   
                return add(...num1, ...num2)
            }
            return inner
        }
        console.log(add(1)(2)) //3
        console.log(add(1)(2)(3,5,8)(2)) //21

toString方法会在调用函数本身的时候自动调用,是Function.prototype上的原型方法,我们这里重写了。

打印函数 会自动执行该函数的toString。
打印了这个函数说明有地方返回这个函数,能打印出来返回值,说明是该函数的toString的返回值。
看下面的例子就会明白 toString的用法了

        function smallFun (y){
   
            let x= 10
            smallFun.toString = ()=>{
   
                return x+y
            }
            return smallFun
        }
        console.log(smallFun(10)) //20
//
        function smallFun (y){
   
            let x= 10
            let aaa = ()=>{
   }
            aaa.toString = ()=>{
   
                return x+y
            }
            return aaa
        }
        console.log(smallFun(10)) //20

当我们 return 某个函数本身的时候,这个函数原型上的toString方法会自动执行。
不懂得话可以看看下一篇文章,好好理解一下。

闭包 偏函数 函数柯里化 有着很深的关联。

目录
相关文章
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
445 19
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
329 32
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
209 4
JavaScript基础知识-函数的参数
|
JavaScript
js中函数的传递参数
js中函数的传递参数
297 0
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
188 3
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
239 1

热门文章

最新文章