聊一聊函数之美

函数在任何编程语言中都占据着主导地位。

创新互联为企业级客户提高一站式互联网+设计服务,主要包括成都网站设计、网站建设、外贸网站建设app软件开发公司重庆小程序开发公司、宣传片制作、LOGO设计等,帮助客户快速提升营销能力和企业形象,创新互联各部门都有经验丰富的经验,可以确保每一个作品的质量和创作周期,同时每年都有很多新员工加入,为我们带来大量新的创意。 

而在js中,函数是另类的存在,本质上是特殊的Object,它可以设置属性:

 
 
 
 
  1. const fn = () => { }; 
  2. fn.foo = "foo"; 
  3. console.log(fn.foo); // 'foo' 

今天分享的是函数的一些操作:

  • 函数的缓冲功能memoize
  • 函数柯里化curry
  • 截取参数处理arg
  • 防抖节流
  • 延迟函数执行delay
  • 延迟函数调用defer
  • 异步函数调用compose
  • 函数只被调用一次once
  • 判断函数是否可以执行
  • 检查对象属性checkProp
  • 链式调用函数

函数的缓冲功能memoize

关于memoize的思考来源于reack的Hook文档中,memoize的特性就是「 利用函数的特性做缓存 」。

不知道你做算法的时候,是否考虑过递归是怎么缓存结果,层层储存的。

如下的斐波那契,每一次计算的结果缓存在哪里呢?

 
 
 
 
  1. const fibonacci = (n) => { 
  2.     return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); 
  3. }; 

我们可以简单模拟一下memoize的实现:

 
 
 
 
  1. const memoize = function (fn) { 
  2.   const cache = {}; 
  3.   return function () { 
  4.     const key = JSON.stringify(arguments); 
  5.     var value = cache[key]; 
  6.     if (!value) { 
  7.       // 为了了解过程加入的log,正式场合应该去掉 
  8.       console.log('新值,执行中...');  
  9.       // 放在一个数组中,方便应对undefined,null等异常情况 
  10.       value = [fn.apply(this, arguments)];   
  11.       cache[key] = value; 
  12.     } else { 
  13.       console.log('来自缓存');   
  14.     } 
  15.     return value[0]; 
  16.   } 

测试一下:

 
 
 
 
  1. const memoizeFibonacci = memoize(fibonacci); 
  2.  
  3. const log = console.log; 
  4. log(memoizeFibonacci(45)); 
  5. // 新值,执行中...;    1134903170  // 等待时间比较长 
  6. log(memoizeFibonacci(45)); 
  7. // 来自缓存;    1134903170 
  8. log(memoizeFibonacci(45)); 
  9. // 来自缓存;    1134903170 
  10. log(memoizeFibonacci(45)); 
  11. // 来自缓存;    1134903170 
  12. log(memoizeFibonacci(45)); 

函数柯里化curry

柯里化的概念就是「 把接受多个参数的函数变换成接受一个单一参数的函数 」。

 
 
 
 
  1. const curry = (fn, arity = fn.length, ...args) => 
  2.   arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args); 
  3.  
  4. curry(Math.pow)(2)(10); // 1024 
  5. curry(Math.min, 3)(10)(50)(2); // 2 

这个bind用得非常好,借助它积累每次传进来的参数,等到参数足够时,再调用。

有了柯里化,还有反柯里化,它的概念是「 把多个接受多个参数的函数层层铺平 」。

 
 
 
 
  1. const uncurry = (fn, n = 1) => (...args) => { 
  2.   const next = acc => args => args.reduce((x, y) => x(y), acc); 
  3.   if (n > args.length) throw new RangeError('Arguments too few!'); 
  4.   return next(fn)(args.slice(0, n)); 
  5. }; 
  6.  
  7. const add = x => y => z => x + y + z; 
  8. const uncurriedAdd = uncurry(add, 3); 
  9. uncurriedAdd(1, 2, 3); // 6 

截取函数参数ary

「 截取指定函数参数做操作 」;ary的第二个参数接收一个索引参数,表示只截取得到n的位置。

 
 
 
 
  1. // ary 截取指定参数处理 
  2. const ary = (fn, n) => (args) => fn(args.slice(0, n)); 
  3.  
  4. // 如果处理的数据是字符串 
  5. const checkPe = (arg) => { 
  6.   if (arg && arg.indexOf('pe') > -1) { 
  7.     return arg.indexOf('pe') 
  8.   } 
  9.   return -1 
  10. const getPe = ary(checkPe, 5); 
  11. const numsPe = ['wpe', 'wwperr', 'wwepe'].map(x => getPe(x)); 
  12.  
  13. console.log(numsPe, 'numsPe') 
  14. // [1, 2, 3] 

如果是数组的话,需要使用扩展运算符。

 
 
 
 
  1. // 如果处理的数据是数组 
  2. const ary = (fn, n) => (...args) => fn(...args.slice(0, n)); 
  3.  
  4. const firstTwoMax = ary(Math.max, 3); 
  5. const nums =[[2, 6, 9, 'a'], [6, 4, 8], [10]].map(x => firstTwoMax(...x)); 
  6.  
  7. console.log(nums, 'nums') 
  8. // [9, 8, 10] 

防抖节流

关于防抖和节流的区别可以参考我之前的文章《电梯与地铁之说》。

 
 
 
 
  1. const debounce = (fn, ms = 0) => { 
  2.   let timeoutId; 
  3.   return function(...args) { 
  4.     clearTimeout(timeoutId); 
  5.     timeoutId = setTimeout(() => fn.apply(this, args), ms); 
  6.   }; 
  7. }; 
  8.  
  9. window.addEventListener( 
  10.   'resize', 
  11.   debounce(() => { 
  12.     console.log(window.innerWidth); 
  13.     console.log(window.innerHeight); 
  14.   }, 250) 

传入高频次调用的函数和时间间隔,返回一个已防抖的函数。

节流会稀释函数的执行频率。在wait秒内只执行一次。

 
 
 
 
  1. const throttle = (fn, wait) => { 
  2.   let inThrottle, lastFn, lastTime; 
  3.   return function() { 
  4.     const context = this, 
  5.       args = arguments; 
  6.     if (!inThrottle) { 
  7.       fn.apply(context, args); 
  8.       lastTime = Date.now(); 
  9.       inThrottle = true; 
  10.     } else { 
  11.       clearTimeout(lastFn); 
  12.       lastFn = setTimeout(function() { 
  13.         if (Date.now() - lastTime >= wait) { 
  14.           fn.apply(context, args); 
  15.           lastTime = Date.now(); 
  16.         } 
  17.       }, Math.max(wait - (Date.now() - lastTime), 0)); 
  18.     } 
  19.   }; 
  20. }; 
  21.  
  22. window.addEventListener( 
  23.   'resize', 
  24.   throttle(function(evt) { 
  25.     console.log(window.innerWidth); 
  26.     console.log(window.innerHeight); 
  27.   }, 250) 
  28. ); // Will log the window dimensions at most every 250ms 

延迟函数执行delay

delay字面意思:「 延迟执行 」。

 
 
 
 
  1. const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args); 
  2.  
  3. delay( 
  4.   function (text) { 
  5.     console.log(text); 
  6.   }, 
  7.   1000, 
  8.   'later' 
  9. ); // Logs 'later' after one second. 

延迟函数调用defer

defer字面意思:「 延迟调用 」。

可适用于推迟 cpu 密集型计算,以免阻塞渲染引擎工作。使用setTimeout(超时时间为1ms)将函数参数添加到浏览器事件队列末尾。

  
  
  
  
  1. const defer = (fn, ...args) => setTimeout(fn, 1, ...args); 
  2.  
  3. // Example A: 
  4. defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a' 

异步函数compose

compose函数是「 从右向左去实现的数据执行流 」。它的真正意义在于逻辑分层。利用reduce方法实现函数的“洋葱”包裹。

 
 
 
 
  1. const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args))); 
  2.  
  3. const substract3 = x => x - 3; 
  4. const add5 = x => x + 5; 
  5. const multiply = (x, y) => x * y; 
  6. const multiplyAndAdd5AndSubstract3 = compose( 
  7.   substract3, 
  8.   add5, 
  9.   multiply 
  10. ); 
  11. multiplyAndAdd5AndSubstract3(5, 2); // 12 

要想实现从左向右执行也非常简单,把f和g的位置互调一下。

函数只被调用一次once

因为 JavaScript 是单线程执行环境,不需要考虑并发环境,直接一个内部变量存到闭包中,每次调用前判断,并在第一次调用时,修改其值,让后续调用全部失效。

 
 
 
 
  1. const once = (fn) => { 
  2.   let called = false; 
  3.   return function (...args) { 
  4.     if (called) return; 
  5.     called = true; 
  6.     return fn.apply(this, args); 
  7.   }; 
  8. }; 
  9.  
  10. const startApp = function (event) { 
  11.   console.log(this, event); // document.body, MouseEvent 
  12. }; 
  13. document.body.addEventListener("click", once(startApp)); 

判断函数是否可以执行

第一个参数为函数是否可以执行的判断条件,第二个参数为执行的函数。

 
 
 
 
  1. const when = (pred, whenTrue) => (x) => (pred(x) ? whenTrue(x) : x); 
  2.  
  3. const doubleEvenNumbers = when( 
  4.   (x) => x % 2 === 0, 
  5.   (x) => x * 2 
  6. ); 
  7. doubleEvenNumbers(2); // 4 
  8. doubleEvenNumbers(1); // 1 

检查对象属性

「 判断某个对象是否具备要求 」。用!!强制转化为布尔类型。

 
 
 
 
  1. const checkProp = (predicate, prop) => (obj) => !!predicate(obj[prop]); 
  2.  
  3. const lengthIs4 = checkProp((l) => l === 4, "length"); 
  4. lengthIs4([]); // false 
  5. lengthIs4([1, 2, 3, 4]); // true 
  6.  
  7. const sizeIs4 = checkProp((l) => l === 4, "size"); 
  8. sizeIs4(new Set([1, 2, 3, 4])); // true 
  9.  
  10. const session = { obj: { active: true, disabled: false } }; 
  11. const validUserSession = checkProp((u) => u.active && !u.disabled, "obj"); 
  12.  
  13. validUserSession(session); // true 

链式调用

将函数数组转换为有决策权的链式函数调用。

 
 
 
 
  1. const chainAsync = (fns) => { 
  2.   let curr = 0; 
  3.   const last = fns[fns.length - 1]; 
  4.   const next = () => { 
  5.     const fn = fns[curr++]; 
  6.     fn === last ? fn() : fn(next); 
  7.   }; 
  8.   next(); 
  9. }; 
  10.  
  11. chainAsync([ 
  12.   (next) => { 
  13.     console.log("0 seconds"); 
  14.     setTimeout(next, 1000); 
  15.   }, 
  16.   (next) => { 
  17.     console.log("1 second"); 
  18.     setTimeout(next, 1000); 
  19.   }, 
  20.   () => { 
  21.     console.log("2 second"); 
  22.   }, 
  23. ]); 

 本文转载自微信公众号「惊天码盗」,可以通过以下二维码关注。转载本文请联系惊天码盗公众号。

标题名称:聊一聊函数之美
文章网址:http://www.mswzjz.com/qtweb/news18/174018.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联