10.18学习笔记，js高级第四天

一、深浅拷贝

二、异常处理

三、处理this

四、性能优化

---

一

1.浅拷贝

        浅拷贝：拷贝的是地址

        拷贝方法：

                （1）拷贝对象：Object.assgin(）展开运算符{...obj}拷贝对象

                （2）拷贝数组：Array.prototyte.concat()  [...arr]

        直接复制对象的问题：前拷贝拷贝单层会不会影响原来对象的值，多次会影响

 const obj={
            uname:"pink",
            age:19
        }
        const o=obj
        o.age=20
        // obj.uge的值也会改成20

2.深拷贝

        深拷贝：

        有三种方法

                (1).递归实现深拷贝

                (2).lodash/cloneDeep

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

           (1)

const obj={
            uname:"pink",
            age:19,
            hobby:['兵乓球','足球']
        }
        const o={}
        function deepCopy(newObj,oldObj){
            for (let k in oldObj){
                if(oldObj[k] instanceof Array){
                    newobj=[]
                    deepCopy(newObj,oldObj[k])
                }else{
                    // k 属性名 oldObj【k】属性值
                    newObj[k]/*创建属性名*/=oldObj[k]

                }

            }
        }
        deepCopy(o,obj)
        console.log(obj)
        console.log(o)

面试如何实现深拷贝

        通过递归实现，若有数组，先数组，再对象。

        （2）

        

   const obj={
            uname:"pink",
            age:19,
            hobby:['兵乓球','足球'],
            family:{
                baby:'小pink'
            }
        }
        const o=_.cloneDeep(obj)
        console.log(obj)
        console.log(o)

        (3)

      const obj={
            uname:"pink",
            age:19,
            hobby:['兵乓球','足球'],
            family:{
                baby:'小pink'
            }
        }
        // 对象转字符串 字符串再转回来
        const o=JSON.parse( JSON.stringify(obj))
        console.log(o)

         

---

二

   1.throw抛出异常

                    会抛出异常并终止程序

                      经常和new  Error 使用

  function fn(x,y){
            if(!x||!y){
                throw new Error('没有参数传递进来')
            }
            return x+y
        }
        console.log(fn())

2.try/catch捕获异常

  function fn(){

        try{
        const p=document.querySelector('.p')
        p.style.color='red'
        }catch(a){
            console.log(err.message)
            return
            
        }finally{//无论成功，失败都会执行
            alert('执行')
        }
    }
    fn()

3.debugger

        调试用，刷新控制台自动跳到该地方

---

三

处理this

1.this指向

        普通函数

                谁调用指向谁

                严格模式this指向underfind

        箭头函数

                本身没有this，指向上一层this

                原型对象也不推荐采用箭头函数

2.改变this指向

        (1)call

                fun.cal(thisArg,arg1,arg2....)

  <script>
        const obj={
           uname:'pink' 
        }
    function fn(x,y){
        console.log(this)
        console.log(x+y)
    }
    fn.call(obj)
    fn.call(obj,1,2)

        (2)apply        

                fun.apply(this,[Argsarray])

              场景：  求数组最大值

   const obj={
           uname:'pink' 
        }
    function fn(x,y){
        console.log(this)
        console.log(x+y)
    }
    fn.apply(obj)
    fn.call(obj,[1,2])

 求最大值

const max=Math.max.apply(null,[1,23,4])//23

            （3）bind（）-重点

                        不会立即调用函数，返回值是函数（改过this的obj）

                        语法:fun.bind(thisArg,arg1,arg2,....)

                         thisArg

  const obj={
            age:18
        }
        function fn(){
            console.log(this)
        }

        const fn1=fn.bind(obj)
        fn1()

                               应用：两秒启用按钮

  const btn=document.querySelector('button')
        btn.addEventListener('click',function(){
            this.disabled=true
            setTimeout(function(){
                this.disabled=false
            }.bind(this),2000)
        })

四

性能优化

1.节流

        throttle

        指连续触发事件但是在n秒内中只执行一次

        使用场景

                小米轮播图，鼠标移动，

        节流函数需要用到闭包实现

<div class="box"></div>
  <script>
    const box=document.querySelector('.box')
    let i=1
    function mouseMove(){
      box.innerHTML=++i
    }
    //节流函数 throttle
    function throttle(fn,t){

      let startTime=0
      return function(){
        // 得到当前时间
        let now =Date.now()
        // 判断
        if(now-startTime>=t){
          // 调用函数
          fn()
          // 起始时间等于现在时间
          startTime=now
        }
      }
    }
    box.addEventListener('mousemove',throttle(mouseMove,200))
    
  </script>

2.防抖（debounce）

        指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行事件。(打断又要重新计算)

        应用场景：输入框，设定输入完毕后再发送请求，假如重新输入，则重新计算。

 <div class="box"></div>
  <script>
    let box=document.querySelector('.box')
    let i=0
    function mouseMove(){
      box.innerHTML=++i
    }
    function debounce(fn,t){
      let timeId
      return function(){
        if(timeId) clearTimeout(timeId)
       timeId=setTimeout(function(){
        fn()
       },t)

        
      }
    }
    box.addEventListener('mousemove',debounce(mouseMove,500))
    
  </script>