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

最新推荐文章于 2024-11-02 19:19:35 发布

2401_84183802

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量250

点赞数 8

分类专栏：程序员文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_84183802/article/details/138454181

版权

程序员专栏收录该内容

120 篇文章 1 订阅

订阅专栏

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来完成防抖与节流

new

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吃饭

柯里化

函数柯里化就是我们给一个函数传入一部分参数，此时就会返回一个函数来接收剩余的参数，后面执行返回的那个函数
将函数的一个参数拆分为两个乃至更多参数

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:'深圳'},


![img](https://img-blog.csdnimg.cn/img_convert/4e586bd4502f4a2caf9b6c6742597d31.png)
![img](https://img-blog.csdnimg.cn/img_convert/9d67d2bfb1c5f202057fd1f224e96f0f.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**