中级前端工程师必须要掌握的27个JavaScript 技巧(2)

函数式编程另一个重要的函数 compose,能够将函数进行组合,而组合的函数只接受一个参数,所以如果有接受多个函数的需求并且需要用到 compose 进行函数组合,就需要使用柯里化对准备组合的函数进行部分求值,让它始终只接受一个参数。

借用冴羽博客中的一个例子:

中级前端工程师必须要掌握的27个JavaScript 技巧

11. 函数柯里化(支持占位符)

中级前端工程师必须要掌握的27个JavaScript 技巧

使用方法:

中级前端工程师必须要掌握的27个JavaScript 技巧

中级前端工程师必须要掌握的27个JavaScript 技巧

通过占位符能让柯里化更加灵活,实现思路是,每一轮传入的参数先去填充上一轮的占位符,如果当前轮参数含有占位符,则放到内部保存的数组末尾,当前轮的元素不会去填充当前轮参数的占位符,只会填充之前传入的占位符。

12. 偏函数

中级前端工程师必须要掌握的27个JavaScript 技巧

使用方法:

中级前端工程师必须要掌握的27个JavaScript 技巧

偏函数和柯里化概念类似,个人认为它们区别在于偏函数会固定你传入的几个参数,再一次性接受剩下的参数,而函数柯里化会根据你传入参数不停的返回函数,直到参数个数满足被柯里化前函数的参数个数。

Function.prototype.bind 函数就是一个偏函数的典型代表,它接受的第二个参数开始,为预先添加到绑定函数的参数列表中的参数,与 bind 不同的是,上面的这个函数同样支持占位符。

13. 斐波那契数列及其优化

中级前端工程师必须要掌握的27个JavaScript 技巧

利用函数记忆,将之前运算过的结果保存下来,对于频繁依赖之前结果的计算能够节省大量的时间,例如斐波那契数列,缺点就是闭包中的 obj 对象会额外占用内存。

14. 实现函数 bind 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

函数的 bind 方法核心是利用 call,同时考虑了一些其他情况,例如:

bind 返回的函数被 new 调用作为构造函数时,绑定的值会失效并且改为 new 指定的对象 定义了绑定后函数的 length 属性和 name 属性(不可枚举属性) 绑定后函数的原型需指向原来的函数

15. 实现函数 call 方法

中级前端工程师必须要掌握的27个JavaScript 技巧

原理就是将函数作为传入的上下文参数(context)的属性执行,这里为了防止属性冲突使用了 ES6 的 Symbol 类型。

16. 简易的 CO 模块

中级前端工程师必须要掌握的27个JavaScript 技巧

使用方法:

中级前端工程师必须要掌握的27个JavaScript 技巧

run 函数接受一个生成器函数,每当 run 函数包裹的生成器函数遇到 yield 关键字就会停止,当 yield 后面的 promise 被解析成功后会自动调用 next 方法执行到下个 yield 关键字处,最终就会形成每当一个 promise 被解析成功就会解析下个 promise,当全部解析成功后打印所有解析的结果,衍变为现在用的最多的 async/await 语法。

17. 函数防抖

中级前端工程师必须要掌握的27个JavaScript 技巧

leading 为是否在进入时立即执行一次, trailing 为是否在事件触发结束后额外再触发一次,原理是利用定时器,如果在规定时间内再次触发事件会将上次的定时器清除,即不会执行函数并重新设置一个新的定时器,直到超过规定时间自动触发定时器中的函数。

同时通过闭包向外暴露了一个 cancel 函数,使得外部能直接清除内部的计数器。

18. 函数节流

中级前端工程师必须要掌握的27个JavaScript 技巧

和函数防抖类似,区别在于内部额外使用了时间戳作为判断,在一段时间内没有触发事件才允许下次事件触发。

19. 图片懒加载

中级前端工程师必须要掌握的27个JavaScript 技巧

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c6c15d98738fcc2d42698e2a4df0b408.html