在学习
JavaScript，或者前端面试中，有人会问你节流函数、防抖函数、递归函数等，本文分享了5个常见函数，希望对你有所帮助。
在 JavaScript 中有一些问题会被拿出来经常讨论，这些问题每个人都有不同的思路，想要理解这些问题，最好的方法就是自己实现一遍，话不多说，开始正题。
数组扁平化
数组扁平化有很多方法，但最终最好的方法就是递归，实现一个指定深度的扁平化方法，这样基本的套路都会了解。
1functionflattenDepth(array, depth =1){
2letresult = []
3array.forEach(item=>{
4letd = depth
5if(Array.isArray(item) && d >0) {
6result.push(...(flattenDepth(item, --d)))
7}else{
8result.push(item)
9}
10})
11returnresult
12}
13
14console.log(flattenDepth([1, [2, [3, [4]],5]]))// [ 1, 2, [ 3, [ 4 ] ], 5 ]
15console.log(flattenDepth([1, [2, [3, [4]],5]],2))// [ 1, 2, 3, [ 4 ], 5 ]
16console.log(flattenDepth([1, [2, [3, [4]],5]],3))// [ 1, 2, 3, 4, 5 ]
递归实现很简洁易懂，就是将每一项遍历，如果某一项为数组，则让该项继续调用，这里指定了 depth 作为扁平化的深度，因为这个参数对数组的每一项都要起作用，故放在循环的里面。
柯里化
函数的柯里化都被讲烂了，每个人都有自己的理解和实现方法，一句话解释就是 参数够了就执行，参数不够就返回一个函数，之前的参数存起来，直到够了为止 。
1functioncurry(func){
2varl = func.length
3returnfunctioncurried(){
4varargs = [].slice.call(arguments)
5if(args.length < l) {
6returnfunction(){
7varargsInner = [].slice.call(arguments)
8returncurried.apply(this, args.concat(argsInner))
9}
10}else{
11returnfunc.apply(this, args)
12}
13}
14}
15
16varf =function(a, b, c){
17returnconsole.log([a, b, c])
18};
19
20varcurried = curry(f)
21curried(1)(2)(3)// => [1, 2, 3]
22curried(1,2)(3)// => [1, 2, 3]
23curried(1,2,3)// => [1, 2, 3]
上面的代码不难看出，每次判断参数的个数，与被柯里化的函数参数个数比较，如果小于就继续返回函数，否则就执行。
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
防抖
防抖按照我的理解就是 不管你触发多少次，都等到你最后触发后过一段你指定的时间才触发 。按照这个解释，写一个基本版的。
1functiondebounce(func, wait){
2vartimer
3returnfunction(){
4varcontext =this
5varargs =arguments
6clearTimeout(timer)
7timer = setTimeout(function(){
8func.apply(context, args)
9}, wait)
10}
11}
现在有个要求就是刚开始的时候也触发，最后一次也触发，并且可以配置，先写个测试页面方便测试功能，每次按空格键就会让数字加1，来测试防抖和节流函数。
1
2
3
4
5#container{text-align: center;color:#333;font-size:30px;}
6
7
8
9
10
11varcount =1
12varcontainer =document.getElementById('container')
13functiongetUserAction(e){
14// 空格
15if(e.keyCode ===32) {
16container.innerHTML = count++
17}
18}
19// document.onkeydown = debounce(getUserAction, 1000, false, true)
20document.onkeydown = throttle(getUserAction,1000,true,true)
21functiondebounce(func, wait, leading, trailing){}
22functionthrottle(func, wait, leading, trailing){}
23
24
25
通过 leading 和 trailing 两个参数来决定开始和结束是否执行，如果 leading 为 true，则没次按空格都会执行一次，如果 trailing 为 true，则每次结束都会将最后一次触发执行。以防抖函数距离，如果两者都为 true，则第一次按空格会加 1，然后快速按空格，此时里面的 getUserAction 并不会执行，而是等到松手后再执行，加入 trailing 为 false，则松手后不会执行。
1functiondebounce(func, wait, leading, trailing){
2vartimer, lastCall =0, flag =true
3returnfunction(){
4varcontext =this
5varargs =arguments
6varnow = +newDate()
7if(now - lastCall < wait) {
8flag =false
9lastCall = now
10}else{
11flag =true
12}
13if(leading && flag) {
14lastCall = now
15returnfunc.apply(context, args)
16}
17if(trailing) {
18clearTimeout(timer)
19timer = setTimeout(function(){
20flag =true
21func.apply(context, args)
22}, wait)
23}
24}
解释一下，每次记录上次调用的时间，与现在的时间对比，小于间隔的话，第一次执行后之后就不会执行，大于间隔或在间隔时间后调用了，则重置 flag，可以与上面那个基本版的对比着看。
节流
节流就是， 不管怎么触发，都是按照指定的间隔来执行 ，同样给个基本版。
1functionthrottle(func, wait){
2vartimer
3returnfunction(){
4varcontext =this
5varargs =arguments
6if(!timer) {
7timer = setTimeout(function(){
8timer =null
9func.apply(context, args)
10}, wait)
11}
12}
13}
同样和防抖函数一样加上两个参数，也可使用上面的例子来测试，其实两者的代码很类似。
1functionthrottle(func, wait, leading, trailing){
2vartimer, lastCall =0, flag =true
3returnfunction(){
4varcontext =this
5varargs =arguments
6varnow = +newDate()
7flag = now - lastCall > wait
8if(leading && flag) {
9lastCall = now
10returnfunc.apply(context, args)
11}
12if(!timer && trailing && !(flag && leading)) {
13timer = setTimeout(function(){
14timer =null
15lastCall = +newDate()
16func.apply(context, args)
17}, wait)
18}else{
19lastCall = now
20}
21}
22}
顺便给大家推荐一个裙，它的前面是 537，中间是631，最后就是 707。想要学习前端的小伙伴可以加入我们一起学习，互相帮助。群里每天晚上都有大神免费直播上课，如果不是想学习的小伙伴就不要加啦。
对象拷贝
对象拷贝都知道分为深拷贝和浅拷贝，黑科技手段就是使用
1JSON.parse(JSON.stringify(obj))
还有个方法就是使用递归了
1functionclone(value, isDeep){
2if(value ===null)returnnull
3if(typeofvalue !=='object')returnvalue
4if(Array.isArray(value)) {
5if(isDeep) {
6returnvalue.map(item=>clone(item,true))
7}
8return[].concat(value)
9}else{
10if(isDeep) {
11varobj = {}
12Object.keys(value).forEach(item=>{
13obj[item] = clone(value[item],true)
14})
15returnobj
16}
17return{ ...value }
18}
19}
20
21varobjects = {c: {'a':1,e: [1, {f:2}] },d: {'b':2} }
22varshallow = clone(objects,true)
23console.log(shallow.c.e[1])// { f: 2 }
24console.log(shallow.c === objects.c)// false
25console.log(shallow.d === objects.d)// false
26console.log(shallow === objects)// false
对于基本类型直接返回，对于引用类型，遍历递归调用 clone 方法。
总结
其实对于上面这些方法，总的来说思路就是递归和高阶函数的使用，其中就有关于闭包的使用，前端就爱问这些问题，最好就是自己实现一遍，这样有助于理解。
