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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了前端经典面试题解密-add(1)(2)(3)(4) == 10到底是个啥？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2421字，纯文字阅读大概需要4分钟。

内容图文

前言

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

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！现任京东前端攻城狮一枚。 胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！

内容总结

以上是互联网集市为您收集整理的前端经典面试题解密-add(1)(2)(3)(4) == 10到底是个啥？全部内容，希望文章能够帮你解决前端经典面试题解密-add(1)(2)(3)(4) == 10到底是个啥？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---