其他分享
首页 > 其他分享> > js面试高频题:函数柯里化的实现(彻底弄懂)

js面试高频题:函数柯里化的实现(彻底弄懂)

作者:互联网

函数柯里化的适用场景有:

1. 参数复用

2. 延时执行

3. 提前确认

函数柯里化的核心在于:函数里面返回函数,从而做到参数复用的目的。

我们以一个js经典面试题为例开始讲解:

实现一个函数,使得满足以下几个要求:

add(1)(2)(3)(4)//输出10

add(1,2)(3)(4)//也输出10

add(1)(2,3)(4)//也输出10

这是一道经典的函数柯里化手撕题,我们来讲一下该函数的具体实现:

因为函数柯里化的核心就是 函数里面返回函数,因此我们可以初始构造一个柯里化函数框架:

//初步构造柯里化的结构
function add(){
    //let args = arguments;//用于获取第一个括号里的参数
    // 因为arguments是类数组结构,因此上述代码还需要进行改进,下面这行才是正确的
    let args = Array.prototype.slice.call(arguments);
    
    let inner = function(){
         args.push(...arguments);
    }
    return inner;
}

返回结果如下图所示:

当add(1)只有一个参数时,返回了一个函数,柯里化的目的初步达到。

我们试着再增加一个参数add(1)(2),看看返回结果是什么:

返回结果是undefined,这个结果是合理的,因为我们的inner函数并没有返回结果呀,因此输出undefined。

我们试着给inner函数加上返回结果:

function add(){
    //let args = arguments;//用于获取第一个括号里的参数
    // 因为arguments是类数组结构,因此上述代码还需要进行改进,下面这行才是正确的
    let args = Array.prototype.slice.call(arguments);
    
    let inner = function(){
         args.push(...arguments);// arguments默认就为函数的参数,即使我们没有列出形参
         let sum =  args.reduce((prev,cur) => {
              return prev+cur;
         });
         return sum;
    }
    return inner;
}

输出结果如下: 

看起来有两个参数也实现了,那我们试着把形参改为3个,结果就报错了: 

因为我们并没有处理第三个参数,现在的情况就是,难道我们每增加一个参数,都需要再写一个内部函数吗?这样貌似可以,但是如果参数的个数提前未可知呢?--那就采用递归来实现了: 

function add(){
    //let args = arguments;//用于获取第一个括号里的参数
    // 因为arguments是类数组结构,因此上述代码还需要进行改进,下面这行才是正确的
    let args = Array.prototype.slice.call(arguments);
    
    let inner = function(){
         args.push(...arguments);// arguments默认就为函数的参数,即使我们没有列出形参
         return inner;
    }
    return inner;
}

这样有几个括号,就会进行几次递归,并在递归时执行args.push(...arguments)操作。离成功更近了 !我们看下输出结果:

这个是合理的,因为我们并没有写参数相加的代码逻辑呀,而inner本身就是一个函数,因此最后的输出结果就是一个函数,不过细细留心,控制台输出的函数是被转换为string类型的字符串了的,转换为string是因为调用了toString方法,那是不是意味着,只要我们改写toString方法的内容,让他输出sum的结果,而不是简单转义,就可以达到我们的目的了呢? 

function add(){
    //let args = arguments;//用于获取第一个括号里的参数
    // 因为arguments是类数组结构,因此上述代码还需要进行改进,下面这行才是正确的
    let args = Array.prototype.slice.call(arguments);
    
    let inner = function(){
         args.push(...arguments);// arguments默认就为函数的参数,即使我们没有列出形参
         return inner;
    }
    
    inner.toString = function(){
        return args.reduce((prev,cur) => {
            return prev + cur;
        });
    }
    
    return inner;
}

 输出结果如下:

4377638d1d15c127e0ef3186ea4469c9.png

确实达到了预期,但貌似这个函数结果表示是一个函数呀~那如果我们就想要字符串类型或者number类型的怎样处理呢?

其实很简单,只需要把结果根据目标类型进行一下强制转换就可以了~0736cd4adf413ce98982c2baf756a284.pnge08f46f2544f919eb53fabffb8ed0edc.png

标签:return,函数,args,弄懂,js,let,arguments,柯里化,inner
来源: https://blog.csdn.net/double_sweet1/article/details/122786636