JS查漏补缺——柯里化

简介: JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解柯里化

数中使用处理后的结果

function sum(x){
  x = x + 1
  return function (y){
    y = y * 2
    return x + y
  }
}

console.log(sum(1)(2))

当某一层的函数输出结果出现问题的时候就可以到对应的地方去修改就可以了

好处二:逻辑的复用

定制函数,将重复使用的参数定制成一个函数使用,减少代码量和工作量

// 场景:我们经常需要将5与其他数字相加
// 未复用前
function sum(m,n){
  m = m * m
    return m + n
}
console.log(sum(5,10))
console.log(sum(5,100))
console.log(sum(5,1000))
console.log(sum(5,10000))

// 柯里化后
function sum(m){
  m = m * m
  return function(n){
    return m + n
  }
}
var add5 = sum(5)
add5(10)
add5(100)
add5(1000)
add5(10000)

自动柯里化函数的实现

目的:通过封装柯里化函数来实现传入一个普通函数自动柯里化的功能

柯里化函数的实现

function myCurrying(fn) {
  // 不确定接收几个参数就用...args来接收
  function curried(...args){
    // 判断当前已经接受的参数的个数,和参数本身需要接受的参数是否已经一致了
    // 一旦接收完后就不再接收了
    if(args.length >= fn.length){
      // 如果调用的时候有绑定this,就直接绑定到fn上
      return fn.apply(this,args)
      // return fn.call(this,args) 也可以
    }else{
      // 新函数接收后面的参数
      function curried2(...args2) {
        // 后来的参数要与之前的函数进行拼接,然后再递归调用
        return curried.apply(this,args.concat(args2))
      }
        return curried2
    }
  }
  return curried
}

自动柯里化函数的使用

// 要进行柯里化的普通函数
function sum(m,n){
  m = m * m
    return m + n
}

// 自动柯里化函数的封装
function myCurrying(fn) {
  ...
}

var currySum = myCurrying(sum)
console.log(currySum(10)(10)) //110
console.log(currySum(10,10))  //110

普通函数使用柯里化的注意事项

如果是一个一个参数传的话就不能传入多于原本普通函数所需的参数,否则会将前面的看做是一个函数从而报错

// 要进行柯里化的普通函数
function sum(m,n){
  m = m * m
    return m + n
}

// 自动柯里化函数的封装
function myCurrying(fn) {
  ...
}

var currySum = myCurrying(sum)
console.log(currySum(10)(10)(1))

Snipaste_2022-09-10_10-02-00.png
而如果输入的参数少于原本普通函数所需的参数,则会返回一个接受剩余参数的函数

var currySum = myCurrying(sum)
console.log(currySum(10))
// [Function: curried2]

利用这一特点补充一下柯里化的第三个好处

好处三:延迟运行/计算

要求:柯里化了后的函数,它返回一个新的函数,新的函数接收可分批次接受新的参数,延迟到最后一次计算,我们可以任意传入参数,当不传参数的时候,输出计算结果

function currying(fn) {
    var allArgs = []; // 用来接收参数

    return function next(...args) {
        var args1 = [].slice.call(args);

        // 判断是否执行计算
        if (args1.length > 0) {
            allArgs = allArgs.concat(args1); // 收集传入的参数,进行缓存
            return next;
        } else {
            return fn.apply(null, allArgs); // 符合执行条件,执行计算
        }
    }
}

补充slice( )的说明 : slice() 方法提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串。

使用1:

function sum(m, n) {
    m = m * m
    return m + n
}

function currying(fn) {
   ...
}

var currySum = currying(sum)
console.log(currySum(10)(10)(1)(10)()) // 输出结果:110
// 传入多少个都无所谓,到时候只要需要的参数就行,也不会报错
// 后面一定要加上括号,因为传入空参数是执行的条件,不加则会返回一个接受剩余参数的函数

使用2:

function sum(...args) {
    var m = 0
    for (var i = 0; i < args.length; i++) {
        m += args[i];
    }
    return m;
};

function currying(fn) {
    ...
}

var currySum = currying(sum)
console.log(currySum(10)(10)(1)(10)()) // 输出结果:31
目录
相关文章
|
2月前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
2月前
|
JavaScript 前端开发
JS 偏函数、函数柯里化~
该文章介绍了JavaScript中偏函数和函数柯里化的概念、实现方法和使用场景,通过代码示例展示了如何创建预设参数的函数以及如何将多参数函数转换成单参数函数的链式调用。
17 0
JS 偏函数、函数柯里化~
|
3月前
|
JavaScript 前端开发
JS : 柯里化 分布传参给函数
JS : 柯里化 分布传参给函数
|
5月前
|
JavaScript 前端开发 测试技术
JavaScript进阶-高阶函数与柯里化
【6月更文挑战第18天】在JavaScript中,高阶函数和柯里化是函数式编程的核心。高阶函数接收或返回函数,常用于数组操作和事件处理。柯里化将多参数函数转化为单参数的逐次求值过程,用于参数预绑定和函数组合。两者能简化逻辑、提高复用性,但也需注意易错点,如混淆参数、过度柯里化,应适度使用并配合测试保证正确性。通过实践和使用工具,如lodash的`_.curry`,能更好地利用这些技术。
47 5
|
6月前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
6月前
|
存储 JavaScript 前端开发
JavaScript函数柯里化
JavaScript函数柯里化
|
设计模式 JSON 前端开发
前端面试必看(手写Promise+js设计模式+继承+函数柯里化等)JavaScript面试全通关(1/3)
前端面试必看(手写Promise+js设计模式+继承+函数柯里化等)JavaScript面试全通关(1/3)
73 0
|
Web App开发 缓存 前端开发
✨从柯里化讲起,一网打尽 JavaScript 重要的高阶函数
✨从柯里化讲起,一网打尽 JavaScript 重要的高阶函数
|
前端开发
前端知识案例37-javascript基础语法-柯里化
前端知识案例37-javascript基础语法-柯里化
42 0
前端知识案例37-javascript基础语法-柯里化
|
JavaScript 前端开发
JS查漏补缺——JavaScript的继承实现
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解JavaScript的继承实现
91 0