前端经典面试题解密-add(1)(2)(3)(4) == 10到底是个啥？

胡哥有话说

发布于 2020-04-14 17:31:08

6920

发布于 2020-04-14 17:31:08

前言

前端的小伙伴在面试的时候，几乎都会遇到一道这样的面试题：add(1)(2)(3)(4)输出结果为10。在第一次看到这道面试题的时候，很多小伙伴感到了迷茫！借用王宝强在《人在囧途》中的表演：啥啥啥，这写的都是啥？下面胡哥为各位小伙伴带来这道题的揭秘。

一、核心点-基础函数的变种-函数柯里化

我们从0开始，一点点儿的观察。add(1)(2)(3)(4)输出的值怎么成为10，很简单，大家都明白是1+2+3+4的累加。那使用基础函数是怎么实现的呢？

function add (a, b, c, d) {
    return a + b + c + d
}
add(1, 2, 3, 4) // 10

那如何add(1)(2)(3)(4)如何也输出10呢？小伙伴接下来可能会想到这样：

function add (a) {
    return function (b) {
        return function (c) {
            return function (d) {
                return a + b + c + d
            }
        }
    }
}

是不是很完美！

但是如果你这么回答面试官，面试官肯定会立刻怼死你，累加到100怎么办？（PS：没有说10000已经很客气了）

王老师经典语录：下面的是重点，圈起来，一定要考！！

函数柯里化概念：柯里化（Currying）是把接受多个参数的函数转变为接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。

二、函数柯里化解决方案

函数柯里化有两种不同的场景，一种为函数参数个数定长的函数，另外一种为函数参数个数不定长的函数。

1.函数参数个数定长的柯里化解决方案


 // 定长参数
 function add (a, b, c, d) {
 return [
       ...arguments
     ].reduce((a, b) => a + b)
 }

 function currying (fn) {
 let len = fn.length
 let args = []
 return function _c (...newArgs) {
 // 合并参数
         args = [
             ...args,
             ...newArgs
         ]
 // 判断当前参数集合args的长度是否 < 目标函数fn的需求参数长度
 if (args.length < len) {
 // 继续返回函数
 return _c
         } else {
 // 返回执行结果
 return fn.apply(this, args.slice(0, len))
         }
     }
 }
 let addCurry = currying(add)
 let total = addCurry(1)(2)(3)(4) // 同时支持addCurry(1)(2, 3)(4)该方式调用
 console.log(total) // 10

2.函数参数个数不定长的柯里化解决方案问题升级：那这个问题再升级一下，函数的参数个数不确定时，如何实现呢？


 function add (...args) {
 return args.reduce((a, b) => a + b)
 }

 function currying (fn) {
 let args = []
 return function _c (...newArgs) {
 if (newArgs.length) {
             args = [
                 ...args,
                 ...newArgs
             ]
 return _c
         } else {
 return fn.apply(this, args)
         }
     }
 }

 let addCurry = currying(add)
 // 注意调用方式的变化
 console.log(addCurry(1)(2)(3)(4, 5)())

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-04-03，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自胡哥有话说微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度