JavaScript进阶（day04:高阶技巧）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、深浅拷贝

浅拷贝和深拷贝只针对引用类型

1.浅拷贝

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（简单理解：如果单层对象，没问题，如果有多层就有问题）

拷贝对象：

①Object.assgin(新对象，拷贝对象)

②const 新对象={...拷贝对象}

拷贝数组：

①Array.prototype.concat(新数组，拷贝数组)

②const 新数组={...拷贝数组}

总结（直接赋值和浅拷贝）

2.深拷贝

拷贝的是对象，不是地址

2.1通过递归实现深拷贝

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

案例（利用递归函数实现setTimeout模拟setInterval效果）

      const div = document.querySelector('div')
      function time() {
        div.innerHTML = Date().toLocaleString()
        setTimeout(time, 1000)
      }
      time()

深拷贝实现（递归）

// 定义两个对象
let a = {
  name: '小明',
  age: 18,
  hobby: ['唱歌', '玩游戏'],
  brother: {
    name: '小黑',
    age: 19
  }
}
let b = {}
// 定义深拷贝函数
function deepCopy(newObject, oldObject) {
  // 1.遍历旧对象
  // key是对象里面的属性名
  for (let key in oldObject) {
    // 如果对象里面包含数组，则对数组进行循环（递归）
    if (oldObject[key] instanceof Array) {
      newObject[key] = []
      deepCopy(newObject[key], oldObject[key])
    } // 如果对象里面包含对象，则对对象进行循环（递归）
    else if (oldObject[key] instanceof Object) {
      newObject[key] = {}
      deepCopy(newObject[key], oldObject[key])
    } else {
      newObject[key] = oldObject[key]
    }
  }
}
deepCopy(b, a)

2.2lodash/cloneDeep

2.3通过JSON.stringify()实现

总结

二、异常处理

了解JavaScript中程序异常处理的方法，提升代码运行的健壮性

throw抛异常

语法：throw new Error("提示信息")

总结：

①throw抛出异常信息，程序也会终止执行

②throw后面跟的是错误提示信息

③Error对象配合throw使用，能够设置更详细的错误信息

总结

try/catch捕获异常

总结：

①try...catch用于捕获错误信息

②将预估可能发生错误的代码写在try代码段中

③如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息

④finally不管是否有错误，都会执行

总结

debugger

三、处理this

this指向

this指向-普通函数

总结

this指向-箭头函数

注意情况1

注意情况2

总结

改变this

call()(了解)

apply()

call和apply的区别

bind()

总结（call、apply、bind）

四、性能优化

4.1防抖

单位时间内，频繁触发事件，只执行最后一次

实现方式：

• lodash提供的防抖来处理
• 手写一个防抖函数来处理

案例（利用防抖来处理-鼠标滑过盒子显示文字（lodash））

案例（利用防抖来处理-鼠标滑过盒子显示文字（手写防抖函数））

案例（利用节流来处理-鼠标滑过盒子显示文字（手写节流函数））

总结

总结（防抖和节流）

五、综合案例（页面打开，可以记录上一次的视频播放位置）

 // 获取元素
      const video = document.querySelector('video')
      // let time = 0
      // 给video绑定timeupdate事件,该事件会在视频/音频当前位置发生改变时触发
      // 因为事件执行频率太快,需要进行节流
      video.addEventListener(
        'timeupdate',
        _.throttle(function () {
          // 把当前视频播放的位置存储到浏览器中
          localStorage.setItem('videoTime', video.currentTime)
        }, 1000)
      )
      // 给video绑定loadeddata事件,该事件会在页面加载时触发
      video.addEventListener('loadeddata', function () {
        // 将本地存储的时间赋值给视频现在播放的时间,实现视频从上一次的视频播放位置开始播放
        video.currentTime = localStorage.getItem('videoTime') || 0
      })