* debounceTask() * },500) * 也就是触发的频率大于规定的1000ms，控制台只打印’一直触发事件中‘，不会出现’大于设置时间间隔，事件触发‘ */ setInterval(()=>{ console.log('一直触发事件中') debounceTask() },2000) /* * 这个触发频率大于1000ms，每个2000ms打印’一直触发事件中‘和’大于设置时间间隔，事件触发‘ */
## 节流
1. 节流就是每隔固定事件触发一次（也就是在连续点击时，不管你点击频率，每隔固定事件就触发一次事件）
2. 也采用闭包加定时器实现
function throttle(fun,ms=1000){ let canRun=true // 定义开关，默认为true,会启动定时器，false时，在判断语句中结束掉进程 return function (...args){ if(!canRun){ return } // 当canRun为false时触发，也就是已经有一个定时器执行着，就结束该进程；也就是在此处截断 canRun=false // 将canRun的状态改为false，那么在里面定时器执行完毕之前不会再向后走，也就是阻止后面事件触发时响应 setTimeout(()=>{ fun.apply(this,args) canRun=true // 执行完毕后，允许后面事件进来响应 },ms) } } const task=()=>{ console.log('大于设置时间间隔，事件触发') } const throttleTask=throttle(task,1000)
/* * 测试 * 虽然执行频率为500ms一次，但控制台依然1000ms打印一次’大于设置时间间隔，事件触发‘ * 控制台打印 * 一直触发事件中 * 一直触发事件中 * 大于设置时间间隔，事件触发 * 一直触发事件中 * 一直触发事件中 * 大于设置时间间隔，事件触发 */ setInterval(()=>{ console.log('一直触发事件中') throttleTask() },500)
注：可以使用[lodash](https://gitee.com/vip204888)来完成防抖与节流
## new
1. ES6语法糖class原理
function myNew(Func,...args){ const instance={} if(Func.prototype){ // 如果函数原型存在，将instance指向原型对象上去 Object.setPrototypeOf(instance,Func.prototype) } const res=Func.apply(instance,args) // 调用构造器，并将内部的this用instance来代替 if(typeof res==='function' || typeof res==='object' && typeof res===null){ // 兼容处理下返回值 return res } return instance
} function Person(name){ this.name=name } Person.prototype.eat=function (){ console.log(this.name+'吃饭') } const p1=myNew(Person,'jakc') p1.eat() // jack吃饭
## 柯里化
1. 函数柯里化就是我们给一个函数传入一部分参数，此时就会返回一个函数来接收剩余的参数，后面执行返回的那个函数
2. 将函数的一个参数拆分为两个乃至更多参数
function curry(func){ return function curried(...args){ // 传入的参数大于等于原始函数func的参数个数，则直接执行该函数 if(args.length >= func.length){ return func.apply(this, args) } /** * 传入的参数小于原始函数fn的参数个数时 * 则继续对当前函数进行柯里化，返回一个接受所有参数（当前参数和剩余参数） 的函数 */ return function (...args2){ return curried.apply(this,args.concat(args2)) } } } function sum(a,b,c){ return a+b+c } const curriedSum=curry(sum)
console.log(curriedSum(1,2,3)) console.log(curriedSum(1)(2,3)) console.log(curriedSum(1)(2)(3)) // 输出结果都为6
## 扁平化数据
const newArr=[
{
id: 'a',
pid: 0,
value: '陕西',
children:[
{
id: 1,
pid: 'a',
value: '西安',
children:[
{id: 301, pid: 1, value: '雁塔区'},
{id: 302, pid: 1, value: '高新区'}
]
},
{
id: 2,
pid: 'a',
value: '渭南',
children:[]
},
{
id: 3,
pid: 'a',
value: '咸阳',
children:[]
},
]
},
{
id: 'b',
pid: 0,
value: '广东',
children:[
{
id: 11, pid: 'b', value: '广州',children:[]
},
{
id: 12, pid: 'b', value: '深圳',children:[]
},
{
id: 13, pid: 'b', value: '潮汕', children:[]
}
]
}
] function toLine(data,result=[]){ data.forEach(item=>{ if(item.children){ result.push({ id:item.id, pid:item.pid, value:item.value, }) toLine(item.children,result) }else { result.push({ id:item.id, pid:item.pid, value:item.value, }) } }) return result
}
toLine(newArr)
扁平化后数据
[ {id: 'a', pid: 0, value: '陕西'}, {id: 1, pid: 'a', value: '西安'}, {id: 301, pid: 1, value: '雁塔区'}, {id: 302, pid: 1, value: '高新区'}, {id: 2, pid: 'a', value: '渭南'}, {id: 3, pid: 'a', value: '咸阳'}, {id: 'b', pid: 0, value: '广东'}, {id: 11, pid: 'b', value: '广州'}, {id: 12, pid: 'b', value: '深圳'}, {id: 13, pid: 'b', value: '潮汕'}, ]
## 树状化数据
var data=[ {pid:0,id:'a',value:'陕西'}, {pid:'a',id:1,value:'西安'}, {pid:1,id:301,value:'雁塔区'}, {pid:1,id:302,value:'高新区'}, {pid:'a',id:2,value:'渭南'}, {pid:'a',id:3,value:'咸阳'}, {pid:0,id:'b',value:'广东'}, {pid:'b',id:11,value:'广州'}, {pid:'b',id:12,value:'深圳'}, {pid:'b',id:13,value:'潮汕'},
]; function toTree(data,pid) { function tree(pid){ let arr=[] data.filter(item=> { return item.pid === pid // 过滤下与传入的pid（最顶层的pid号）相等的item，也就代表是最顶层， }).forEach(item=>{ arr.push({ id:item.id, pid:item.pid, value:item.value, children:tree(item.id) // 递归调用tree,渲染相同id的一组
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
