花式玩转“一加二加三”

497 阅读3分钟

第一次在这个上面写文章如果有什么写的不好的地方的话希望大家多多包涵,下面您可以领取您的知识了。

add(1)(2)(3)

友友们,不知道大家有没有在面试的过程中遇到这个题目呢?面试官直接给我们一道 add(1)(2)(3) 叫我们实现一下。下面就是我对这道题的简单理解。

解法一:

var add = function(a){
    return function(b){
        return function(c){
            return a+b+c;
        }
    }
}
console.log(add(1)(2)(3);

解法二:

const add = x => y => z => x+y+z;
console.log(add(1)(2)(3);

使用的就是es6出现的箭头函数和如果只有一句代码且这几句代码是这个方法的返回值的话,可以不写大括号,以及const来定义变量。上面其实就是这道题的正确解法了,那么面试官想考察我们什么呢,

  • 1.我想第一个就是我们对于函数调用的简单理解,
  • 2.第二个想必就是你对柯里化的了解,
  • 3.以及对es6的了解程度 方便引出下面他对于es6这个一方面,还有柯里化这一操作的考察,如果你一开始以为就是简单的以为就是一道简单的题目,直接写出了上面的答案的话,同样感觉也还不错。如果你直接写出下面的一种方式,面试官就会感觉你的知识面就比较的广泛,不局限于使用原生js来解决问题。

实现add(1,2)(3) 和add(1)(2,3)

下面的就是我认为用道题可以引出的和柯里化操作相关的问题了。

怎么现实呢?如果你一开始使用的就是第一种解法,那么想当然的就是下面的写法了:


var add = function(a,b){
    return function(c){
        return a+b+c;
    }
}
console.log(add(1,2)(3));
var add1 = function(a){
    return function(b,c){
        return a+b+c
    }
}
console.log(add1(1)(2,3));

如果要使用解法二中的柯里化的思想来解决这个问题的话。我的理解就是要实现一个工具函数专门来生成柯里化函数。

主要思路是什么呢,要判断当前传入函数的参数个数 (args.length) 是否大于等于原函数所需参数个数 (fn.length) , 如果是,则执行当前函数;如果是小于,则返回一个函数。下面就是函数实现:

const curry = (fn, ...args)=>
//  函数的参数个数可以直接通过函数的 .length 属性来访问
    args.length >=fn.length  //判断很关键!!!
    // 传入的参数个数大于等于原始函数的 fn 的参数的个数,就直接执行该函数
    ? fn(...args)
    // 当传入的参宿小于原始函数的 fn 的参数个数时
    // 就继续对当前函数进行柯里化,返回一个接受所有参数(当前参数和剩余参数)的函数
    : (..._args)=> curry(fn, ...args, ..._args);

function add1(x,y,z){
   return x+y+z;
}
const add = curry(add1)
console.log(add(1,2,3));
console.log(add(1)(2)(3));
console.log(add(1,2)(3));
console.log(add(1)(2)(3));

总结

上面是有关于我了解到的 add(1)(2)(3)这道题衍生出来的两种解法,都是很好的方法,但是我个人比较喜欢第二种解法,毕竟在面试的过程中要多加展示出你自己的有点以及突出的地方,这样你才能在万众从中脱颖而出。

希望点进来的小伙伴都认真的观看哦,在上面表达中有什么问题的话请多多包涵,当然你也可以在下方的评论区指出我的错误,以及这道题有什么更加高大上的解法一起分享。最后希望这道题的解法会在未来的某一场面试中帮助到你。

谢谢你的阅览,最后的最后如果你感觉我们文章对您有一点帮助的话,请发动你发财的小手帮我点一个赞

image.png