ES6编程
一 函数柯里化
基础概念
概念:将多个参数的函数变成单一参数的函数,嵌套返回值到所有的参数都被使用最终返回结果.
简单来说:柯里化就是一个函数变化的过程,指的是将一个函数fn(a,b,c)变成fn(a)(b)(c),可以将这个函数称为柯里化函数.
累加的一个案例:
function sum(a,b,c){return a+b+c}let result = sum(1,2,3)console.log("和:"+result);
函数柯里化后结果
function sum(a){return function(b){return function(c){return a + b + c}}}let result = sum(1)(2)(3)
总结:函数柯里化并没有引入新的内容,只是在原来函数基础上针对多参数变成单个参数.
应用场景
假设我现在要写一个打折的算法
/*** 编程一个商品打折的函数*/function fun(count,obj){//计算出销售价格let saleMoney = obj.price*countobj.saleMoney = saleMoney}//商品let obj = {id:1,name:"小米手机13",price:1000} console.log(obj);fun(0.9,obj)console.log(obj);
使用函数柯里化来实现代码的调用
//商品let obj = {id:1,name:"小米手机13",price:1000} let obj2let obj3let obj4let obj5let obj6/*** 使用函数的柯里化,简化打折函数*/function saleFun(count){return function(){//计算出销售价格let saleMoney = obj.price*countobj.saleMoney = saleMoney}}let func = saleFun(0.7)func(obj)func(obj2)func(obj3)func(obj4)let func2 = saleFun(0.8)func2(obj5)func2(obj6)
二 函数的防抖节流
函数防抖
前端开发过程中经常用到一些事件,这些事件在触发的过程中会执行很多次,如果不做限制的话,可能1秒钟就执行会执行几十次.如果在这些函数里面操作了dom,会降低程序的性能,甚至会导致页面卡死.
概念:
事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。
防抖的应用场景：一个是按钮连续点击，另一个是input的连续输入
防抖函数设计
// 定义防抖函数// func: 点击按钮要执行的函数// delay: 防抖时间function debounce(func,delay){// 设置定时器标识let timer;// 返回事件绑定函数return function(){//先清除定时器clearTimeout(timer)//设置定时器timer = setTimeout(func,delay)}}
防抖原理(这里以点击按钮为例)：
- 设置防抖的时间为2秒；
- 点击一次按钮，则开始倒计时；
- 如果在2秒内再次点击按钮，则重新从2秒开始倒计时；
- 如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。
代码实现(这里以点击按钮为例)
给按钮添加点击事件；
- 当用户点击按钮后，先使用clearTimeout清除延时操作；
- 然后使用setTimeout设置延时操作；
- 如果在规定时间内再次点击按钮，则回到第二步；
- 如果在规定时间内没有点击按钮，则执行按钮对应的事件函数。
案例1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"</
)
![[Flask]SSTI1](http://pic.xiahunao.cn/[Flask]SSTI1)
)
：bean后置处理器AutowiredAnnotationBeanPostProcessor)
)
