JavaScript 进阶(四)

发布于:2024-05-18 ⋅ 阅读:(36) ⋅ 点赞:(0)

一、深浅拷贝

1.  浅拷贝

注意:浅拷贝适合单层,不适合里面嵌套了复杂类型的

①、{... obj } 浅拷贝

拷贝后的对象,进行了修改,不会影响原对象的值

②、Object.assign( ,) 把后面的拷贝到前面

拷贝后的对象,进行了修改,也不会影响原对象的值

【总结】

2.  深拷贝

(1)通过递归实现深拷贝

如果属性值不是数组时,用黄框中的数据进行处理

如果属性值是数组时,怎么处理

是把数组取出来,再次遍历,然后装到新数组里面

注意:k 是个变量,变量只能用中括号的形式进行赋值

注意:应该先用蓝框中的部分把数组筛选走,再用黄框中的部分把对象筛选出来

数组属于对象,所以要先筛选数组

【总结】

深拷贝需要用到函数递归,可以做到新对象不影响旧对象。

当普通拷贝时,直接进行拷贝就好了,如果是数组,则再次调用这个递归函数就可以了

如果是对象,则再次用递归把对象解决

先 arr 后 对象

(2)js库lodash里面cloneDeep内部实现了深拷贝

(3)通过JSON.stringify( )实现

蓝框中把对象变为字符串,黄框中把字符串在变成对象

【总结】

二、异常处理

1.  throw 抛异常

2.  try /catch 捕获异常

finally 后面的代码就不执行了

【总结】

3.  debugger

三、处理 this

1.  this 指向

(1)普通函数的 this 指向谁

【例如】

【总结】

(2)箭头函数 thixs 指向

【注意情况】

【总结】

2.  改变 this

(1)call

(2)apply( )

必须以数组形式来传递数据

【使用场景】求数组最大值

注意:可以为空,但是不能省略

【总结】

(3)bind( )

【总结】

四、性能优化

1.  防抖

【案例】

(1)lodash 

① 引入库

② 添加事件

(2)手写防抖函数

【代码】

为了鼠标每移动一次,都执行一次匿名函数的内容

t 就是 500

2.  节流 throttle

节流方法

【案例】

(1)lodash 

【总结】

(2)手写防抖函数

注意:第一次判断有没有定时器,没有定时器,就开一个定时器

时间到了,就清除定时器

下一次判断的时候,没有定时器,就再开一次定时器

注意:在set Time out中是 无法删除 定时器的

因为定时器还在运作,所以使用 timer = null 而不是 clearTimeout ( timer )

【总结】

五、【综合案例】

注意:throttle 不管鼠标经过多少次,都只执行一次

一秒打印一次

时间有变化,就触发这个事件

【代码】

【总结】

好啦!本次的分享到这里就结束啦!!!JS部分的学习到这里也就结束啦!!!撒花撒花!

我们下次分享不见不散哦!!!


网站公告

今日签到

点亮在社区的每一天
去签到