节流，防抖，new函数，柯里化，扁平化数据，树状化数据

本文链接：https://blog.csdn.net/2401_84590306/article/details/138767884

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

},ms)

}
}
const task=()=>{
console.log(‘大于设置时间间隔，事件触发’)
}
const throttleTask=throttle(task,1000)

/*
* 测试
* 虽然执行频率为500ms一次，但控制台依然1000ms打印一次’大于设置时间间隔，事件触发‘
* 控制台打印
* 一直触发事件中
* 一直触发事件中
* 大于设置时间间隔，事件触发
* 一直触发事件中
* 一直触发事件中
* 大于设置时间间隔，事件触发
*/
setInterval(()=>{
console.log(‘一直触发事件中’)
throttleTask()
},500)


注：可以使用[lodash](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)来完成防抖与节流


## 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=>{