js函数相关高级用法

面试中经常会问到防抖、节流、函数柯里化，其他的一般不会问。

防抖函数(debouncing)

 核心思想：对同一个函数进行连续调用时，只有最后次调用生效，

实现方式：使用setTimeout方法，每次调用时，清除上一次的timer,并将本次的timer记录下来就可以保证只有最后一次调用会生效

 

function debounce(method,time){
    var timer = null ;
    return function(){
        var context = this;
        //在函数执行的时候先清除timer定时器;
        if(timer)clearTimeout(timer);
        timer = setTimeout(function(){
            method.call(context);
        },time);
    }
}

节流函数(throttling)

核心思想：对同一个函数进行连续调用时，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用

实现方式：使用setTimeout方法，给定两个时间，后面的时间减去前面的时间，到达我们给定的时间就去触发一次这个事件

 

 function throttle(method,time){
            var timer = null;
            var startTime = new Date();
            return function(){
                var context = this;
                var endTime = new Date();
                var resTime = endTime - startTime;
                //判断大于等于我们给的时间采取执行函数;
                if(resTime >= time){
                    method.call(context);
                    //执行完函数之后重置初始时间，等于最后一次触发的时间
                    startTime = endTime;
                }
            }
}

　

函数柯里化（function currying）

把一个接收多个参数的函数分解成逐层调用的函数，每一层接收一部分参数，余下的参数由下一层再进行分解。

假如有如下函数：

       function add(a,b,c,d,e){
           return a+b+c+d+e;
       }
       console.log(add(1,2,3,4,5)); //15

 现在要求每一步调用最多只能传2个参数，改写为柯里化版本如下：

       function curryAdd(a,b){
           return (c,d)=>{
               return (e)=>{
                   return a+b+c+d+e;
               }
           }
       }
       console.log(curryAdd(1,2)(3,4)(5)); //15

 

看似把简单问题进行了复杂化，那么柯里化函数有什么作用呢？

最大的用处就是可以固定不可变参数和可变参数，消除重复参数

function ajax(url,type,data){
 // ...
}
ajax('www.my.com','GET')
ajax('www.my.com','POST')
//采化柯里化固定重复参数
let newAjax=curryAjax('www.my.com')
//只需要传入可变参数即可
newAjax('GET') 
newAjax('POST')

组合函数(compose function)

 作用：将需要嵌套执行的函数平铺。嵌套执行指的是，一个函数的返回值将作为另一个函数的参数。

function C(){
    console.log('C')
    return function(){
        console.log('C函数回调执行')
    }
}
function B(CM){
    console.log('B')
    return function(){
        console.log('B函数回调执行')
        CM()
    }
}
function A(BM){
    console.log('A')
    return function(){
        console.log('A函数回调执行')
        BM()
    }
}
A(B(C()))()

改为compose方式后调用如下;

compose(A,B,C)()

compose函数的实现：

function compose(...funcs) {
  //没有传入函数参数，就返回一个默认函数（直接返回参数）
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
  // 单元素数组时调用reduce，会直接返回该元素，不会执行callback;所以这里手动执行
    return funcs[0]
  }
  // 依次拼凑执行函数
  return funcs.reduce((prev, current) => (...args) => prev(current(...args)))
}

举例分析:compose(f4,f3,f2,f1)()

• reduce回调函数第一次执行时，返回值为 函数 (...args) => f4(f3(...args))，作为下一次执行的prev参数
• 回调函数第二次执行时，返回值为 函数(...args) => f4(f3(f2(...args))),作为下一次执行的prev参数
• 回调函数第三次执行时，返回值为 函数(...args) => f4(f3(f2(f1(...args))))