欢迎光临
我的个人博客网站

高阶函数


高阶函数

函数柯里化

函数柯里化,又称部分求值。一个currying函数首先会接收一些参数,接受这些参数后该函数不会立即求值。而是会将传入的参数在函数内保存,待函数真正需要求值时,之前的所有参数都会被一次性用于求值

非柯里化

var mothlyCost = 0;   var cost = function(money:number) {    mothlyCost += money;  }   cost(100);  cost(200);  cost(300);  cost(400);   console.log(mothlyCost); 

柯里化实现

function sum(args: Array<number>) {   // 没有这个参数,就开始计算结果返回   let count = 0;    args.forEach(item => {     count += item;   })    return count; }   // 简单柯里化 var curringCost = function(): any {   let args:Array<number> = [];     return function(money?: number){       if(money) {         // 如果有这个参数,就讲数据添加到参数数组中         args.push(money);        } else {         return sum(args);       }   }  }  // 先初始化 let testCost = curringCost(); testCost(100); testCost(200); testCost(300); testCost(400); console.log(testCost()); 

最后我们来给写一个函数,让其可以未其他函数提供柯里化的能力

套壳柯里化

// 柯里化外套 let comCurring = function(fn:Function){    var args:Array<any> = [];     return function(money?: number){       if(arguments.length > 0){        // 有参数,保存,不做其他操作        args.push(...arguments);      } else {        // 无参数,使用参入fn对数据处理        return fn.apply(this, args);      }    } }  // 先初始化 let sumCost = comCurring(sum); sumCost(100); sumCost(200); sumCost(300); sumCost(400); console.log(sumCost()); 

反柯里化

interface Function {   uncurrying: () => (obj:any, number: any) => {}; }   Function.prototype.uncurrying = function(){       // 将this指针保留下来       let self = this;        // 返回一个匿名函数被“push”接收了       return function() {         /**          * push(currentObj, 5)          * 获取第一个参数,也就是需要执行的对象(currentObj)          * 这个时候arguments就只剩下“5”这个变量了          */         let obj = Array.prototype.shift.call(arguments);          /**          * 执行这个方法,注意这个方法是由谁调用的          * 在这个案例中,这个匿名函数是被Array的push方法调用的          * 所以这里的self为push这个方法          */         return self.apply(obj, arguments);       }   }    // 提取push方法   const push  = Array.prototype.push.uncurrying();   let currentObj = {     0 : 1,     length : 1   }    push(currentObj, 5);   console.log(currentObj) 

分时函数

/**  * 分时函数  * 将数据分批操作  * 例子:渲染1000个好友  */ function timeSharing<T>(arr:Array<T>, fn:Function,  count:number, time:number) {      function strat(){       let index = 0,           len = Math.min(arr.length, count);       for (; index < len; index++) {         const element = arr.shift();         fn(element);       }     }        let timer = setInterval(() => {       if(arr.length === 0) {         return clearInterval(timer);        }       strat();     }, time) }  let arr = []; for (let index = 0; index < 1000; index++) {    arr.push(index); } timeSharing(arr, function(num: number){   console.log(num) }, 10, 200);  

惰性加载

其实我觉得这个还是比较勤快,也许是聪明的懒惰。如果方法里有判断,就先加载方法,后面就不需要再进行判断了,下面模拟 浏览器嗅探

  • if A浏览器 使用 aTest方法

  • if B浏览器 使用 bTest方法

公共代码

// 全局控制变量,模拟不同浏览器 const GLOBAL_CONTROL = "A";   function aTest(){   console.log("A浏览器中使用") }  function bTest(){   console.log("B浏览器中使用") } 

基础版

/**  * 简版  * 需要使用if判断,每次执行都需要  */ function compatibleFunction() {   if(GLOBAL_CONTROL === "A") {     aTest();   } else {     bTest();   } } compatibleFunction();  console.log(compatibleFunction) 

先行版

/**  * 惰性加载函数 先行版  * 避免了每次判断,只需要开始的时候执行一遍即可  * 但是如果项目中没有用到,那这个方法就累赘并且还占用了启动时间  */ let lazyCompatibleBefore = (function() {   if(GLOBAL_CONTROL === "A") {     return aTest;   } else {     return bTest;   } })() lazyCompatibleBefore();  console.log(lazyCompatibleBefore) 

懒加载版

/**  * 惰性加载函数 懒加载版  * 避免了每次判断,执行一遍完第一遍后就是以后都是正常方法  * 中间将方法替换为正确版本的方法  * 最后记得再执行一遍,不然第一次就相当于只做了替换  */ let lazyCompatibleRuntime = function() {    if(GLOBAL_CONTROL === "A") {     lazyCompatibleRuntime = aTest;   } else {     lazyCompatibleRuntime = bTest;   }      lazyCompatibleRuntime(); }  console.log(lazyCompatibleRuntime) lazyCompatibleRuntime(); console.log(lazyCompatibleRuntime) 

节流函数

/**  * 节流函数  * 通用的节流函数  * @param fn       需要节流的函数  * @param time     节流时间  * @param isFrist  第一次是否立即执行  */ function throttlingWrapper(fn:Function, time:any, isFrist = true) {   var timer:any = null,       _self = fn;     let throtting = () => {       let _me:any = this;      // 如果timer有值,也就是还在执行中,则直接返回     if(timer){       return;     }       // 是否首次触发     if(isFrist){       _self.apply(_me, arguments);       isFrist = false;       return;     }      // 节流函数本体     timer = setTimeout(() => {       _self.apply(_me, arguments);       clearTimeout(timer);       timer = null     }, time)   }     return throtting; } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 高阶函数
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏