JS——深浅拷贝、异常处理、处理this、节流&防抖

一、知识点

1、深浅拷贝

• 浅拷贝：不会改变原对象，但如果属性值是引用数据类型则拷贝的是地址

    // 拷贝对象
    const obj = {
      uname: 'pink',
      age: 18
    }
    // 方法一：复制内容
    const o = {...obj}
    // 方法二：Object.assign()
    const oo = {}
    Object.assign(oo, obj)
    // 拷贝数组
    // 方法一：[...arr]
    // 方法二：Array.prototype.concat()

• 深拷贝：拷贝的是对象，不是地址

    const obj = {
      uname: 'pink',
      age: 18,
      family:{
        baby:'宝贝'
      },
      hobby:[
        '乒乓','足球'
      ],
    }
    const o = {}
    // 方法一：函数递归
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        // 处理数组的问题
        if (oldObj[k] instanceof Array){
          newObj[k] = []
          deepCopy(newObj[k],oldObj[k])
        }
        else if (oldObj[k] instanceof Object){
          newObj[k] = {}
          deepCopy(newObj[k],oldObj[k])
        }
        else {
          newObj[k]=oldObj[k]
        }
        
      }
    }
    deepCopy(o,obj)

    // 方法二：lodash/cloneDeep
    const oo = _.cloneDeep(obj)
    
    // 方法三：JSONstringify()
    const ooo = JSON.parse(JSON.stringify(obj))

2、异常处理

3、处理this

4、性能优化-Lodash 库 实现节流和防抖

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

  <script src="./lodash.min.js"></script>
  <script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove(){
        box.innerHTML = i++
    }
    box.addEventListener('mousemove',_.debounce(mouseMove,500))
  </script>

• 节流：单位时间内，频繁触发事件，只执行一次

  <script src="./lodash.min.js"></script>
  <script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove(){
        box.innerHTML = i++
    }
    box.addEventListener('mousemove',_.throttle(mouseMove,3000))
  </script>

二、综合案例

• 页面打开，可以记录上一次的视频播放位置

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    // 获取元素
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(()=>{
      // 获取当前的视频时间，存储到本地存储中
      localStorage.setItem('currentTime',video.currentTime)
    },1000)

    // 打开页面触发事件，从本地存储取出记录的时间，赋值给currentTime
    video.onloadeddata = () => {
      video.currentTime = localStorage.getItem('currentTime') || 0
    }
  </script>