专栏首页胡哥有话说前端经典面试题解密-add(1)(2)(3)(4) == 10到底是个啥?

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

前言

前端的小伙伴在面试的时候,几乎都会遇到一道这样的面试题: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)())

本文分享自微信公众号 - 胡哥有话说(hugeyouhuashuo),作者:胡小帅童鞋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你知道ES6箭头函数的优缺点吗?

    我们都知道,在 JavaScript 里定义函数有多种方式。最常见的是用function关键字:

    胡哥有话说
  • Webpack5 开箱体验~欢迎品鉴

    如果您正在打包前端代码,很可能使用一个工具来实现。这个工具极有可能是Webpack。目前Webpack5已经处于beta阶段。

    胡哥有话说
  • [重要] 深入理解 JavaScript 中的作用域和上下文

    在本教程中,我们将深入学习 JavaScript 中作用域(Scope)的一切。 所以,来吧。

    胡哥有话说
  • 柯理化函数

    函数柯理化的表现是:把一个需要传入多个变量的函数变为多个嵌套函数,并且内层函数会调用上层函数的变量。

    娜姐
  • 跨越新起点---每日一题(函数柯里化)

    今天的题目是:sum(1,2,3,4…n)转化为 sum(1)(2)(3)(4)…(n)

    小丑同学
  • 【JS】741- JavaScript 闭包应用介绍

    来源 | https://www.zoo.team/article/vue3-jsx

    pingan8787
  • JavaScript匿名函数与闭包

    匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数。 一.匿名函数 //普通函数 function box() {//函数名是box retur...

    汤高
  • JavaScript 设计模式学习第三篇- 闭包与高阶函数

    JavaScript 的函数也是对象,可以有属性,可以赋值给一个变量,可以放在数组里作为元素,可以作为其他对象的属性,什么都可以做,别的对象能做的它能做,别的对...

    越陌度阡
  • 函数式编程 pipe之函数柯里化

    用户3055976
  • ECMAScript 6 笔记(三)

      ES6 的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本在对外接...

    超然

扫码关注云+社区

领取腾讯云代金券