JavaScript高级阶段Note4_note4 js-CSDN博客

本文链接：https://blog.csdn.net/weixin_62643012/article/details/129381208

JavaScript 进阶 - 第4天

1深浅拷贝

1.1浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象
拷贝数组：Array.prototype.concat() 或者 […arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址(简单理解：如果是单层对象，没问题，如果有多层就有问题)
简单数据类型存放在栈里边，复杂数据类型，存放在堆里边

  <script>
        let obj = {
            age: 12,
            lovers: 'car',
            hobby: {
                one: 'write bug',
                two: 'sing'
            }
        }

        let o = {}
        // 实现拷贝效果

        Object.assign(o, obj)
        o.age = 78
        // 最外层的简单数据类型(age lovers) 在栈 里边 存放的是 值 ，浅拷贝 直接将 简单数据类型的值 复制给新的 值
        // 里边的存放的(hobby) 复杂数据类型 在栈 里边 存放的是 地址 ，浅拷贝的是 地址，故 老的对象随之改变  
        o.hobby.one= 'dance'
        // 新对象
        console.log(o);
        // 老对象
        console.log(obj);
        //出现问题， 新的改了dance 老的对象随之也改了dance
    </script>

1.2深拷贝

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

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

常见方法：

通过递归实现深拷贝
lodash/cloneDeep
通过JSON.stringify()实现

1.2.1递归实现深拷贝

函数递归：

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

简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果类似
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return

<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      debugger
      for (let k in oldObj) {
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        }
        else {
          //  k  属性名 uname age    oldObj[k]  属性值  18
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 20
    o.hobby[0] = '篮球'
    o.family.baby = '老pink'
    console.log(obj)
    console.log([1, 23] instanceof Object)
    // 复习
    // const obj = {
    //   uname: 'pink',
    //   age: 18,
    //   hobby: ['乒乓球', '足球']
    // }
    // function deepCopy({ }, oldObj) {
    //   // k 属性名  oldObj[k] 属性值
    //   for (let k in oldObj) {
    //     // 处理数组的问题   k 变量
    //     newObj[k] = oldObj[k]
    //     // o.uname = 'pink'
    //     // newObj.k  = 'pink'
    //   }
    // }
  </script>
</body>

总结：递归实现深拷贝

深拷贝是拷贝出来的对象不会影响原来的对象，可以考虑用递归实现
普通拷贝直接复制即可数组的话直接递归对象的话直接递归
保证的是先数组后对象（对象里边包含数组）

1.2.2 js库lodash里面cloneDeep内部实现了深拷贝

lodash 事先封装好的一个库，直接调用即可
语法： _.cloneDeep()

<body>
  <!-- 先引用 -->
  <script src="./lodash.min.js"></script>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老pink'
    console.log(obj)
  </script>
</body>

1.2.3JSON序列化

实现原理：首先将对象转为串，简单数据类型，简单数据类型再次到对象给的新的地址

<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    // 把对象转换为 JSON 字符串
    // console.log(JSON.stringify(obj))
    const o = JSON.parse(JSON.stringify(obj))
    console.log(o)
    o.family.baby = '123'
    console.log(obj)
  </script>
</body>

2.异常处理

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

2.1throw

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

<script>
  function counter(x, y) {

    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!')
    }

    return x + y
  }

  counter()
</script>

总结：

throw 抛出异常信息，程序也会终止执行
throw 后面跟的是错误提示信息
Error 对象配合 throw 使用，能够设置更详细的错误信息

2.2try … catch

<script>
   function foo() {
      try {
        // 查找 DOM 节点
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (error) {
        // try 代码段中执行有错误时，会执行 catch 代码段
        // 查看错误信息
        console.log(error.message)
        // 终止代码继续执行
        return

      }
      finally {
          alert('执行')
      }
      console.log('如果出现错误，我的语句不会执行')
    }
    foo()
</script>

总结：

try...catch 用于捕获错误信息
将预估可能发生错误的代码写在 try 代码段中
如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息
finaly不管的的是否有错误，都会执行

2.3debugger

相当于断点调试

3.处理this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

3.1普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)  
  }
  // 函数表达式
  const sayHello = function () {
    console.log(this)
  }
  // 函数的调用方式决定了 this 的值
  sayHi() // window
  window.sayHi()
	

// 普通对象
  const user = {
    name: '小明',
    walk: function () {
      console.log(this)
    }
  }
  // 动态为 user 添加方法
  user.sayHi = sayHi
  uesr.sayHello = sayHello
  // 函数调用方式，决定了 this 的值
  user.sayHi()
  user.sayHello()
</script>

注：普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。

3.2箭头函数

箭头函数 事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。(箭头函数中的this是上一级的指向，默认绑定外层函数的this) 一层一层往上找，直到找到this 位置

<script>
    
  console.log(this) // 此处为 window
  // 箭头函数
  const sayHi = function() {
    console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
  }
  // 普通对象
  const user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
      console.log(this)
    },
    
    sleep: function () {
      let str = 'hello'
      console.log(this)
      let fn = () => {
        console.log(str)
        console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
      }
      // 调用箭头函数
      fn();
    }
  }

  // 动态添加方法
  user.sayHi = sayHi
  
  // 函数调用
  user.sayHi()
  user.sleep()
  user.walk()
</script>

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：

<script>
  // DOM 节点
  const btn = document.querySelector('.btn')
  // 箭头函数 此时 this 指向了 window
  btn.addEventListener('click', () => {
    console.log(this)
  })
  // 普通函数 此时 this 指向了 DOM 对象
  btn.addEventListener('click', function () {
    console.log(this)
  })
</script>

同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：

<script>
  function Person() {
  }
  // 原型对像上添加了箭头函数
  Person.prototype.walk = () => {
    console.log('人都要走路...')
    console.log(this); // window
  }
  const p1 = new Person()
  p1.walk()
</script>

3.3改变this指向

以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：

3.3.1call

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.call(user); // this 值为 user
  sayHi.call(student); // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y;
  }

  // 调用 counter 函数，并传入参数
  let result = counter.call(null, 5, 10);
  console.log(result);
</script>

总结：

call 方法能够在调用函数的同时指定 this 的值
使用 call 方法调用函数时，第1个参数为 this 指定的值,默认指向的是window
call 方法的其余参数会依次自动传入函数做为函数的参数

3.3.2apply

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.apply(user) // this 值为 user
  sayHi.apply(student) // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y
  }
  // 调用 counter 函数，并传入参数
  let result = counter.apply(null, [5, 10])
  console.log(result)
</script>

总结：

apply 方法能够在调用函数的同时指定 this 的值
使用 apply 方法调用函数时，第1个参数为 this 指定的值
apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数

使用场景：求数组的最大值

<script>
        // apply实现的this指向问题
        const arr = [12, 43, 54, 21]
        const max = Math.max.apply(Math,arr)
        console.log(max); //54
    </script>

3.3.3bind (重点)

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }
  let user = {
    name: '小明',
    age: 18
  }
  // 调用 bind 指定 this 的值
  let sayHello = sayHi.bind(user);
  // 调用使用 bind 创建的新函数
  sayHello()
</script>

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。

call apply bind总结

相同点

改变this的指向

区别

call apply 改变this 的指向
call 传递的是普通的参数 apply 传递的是数组（第二个参数，第一个参数都是指向的谁）
bind 不能调用函数，同是可以修改this 的指向问题

4.防抖节流

4.1节流防抖

防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

使用效果:搜索框，输入文字结束后，开始渲染请求数据
面试：采用定时器，触发事件的时候，不断清除定时器，只有不触发事件的时候，执行代码

节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

使用效果（轮播图的点击效果鼠标移动）
总结：实现节流：两个相减的函数（闭包）
面试：两个时间函数相减大于等于默认的时间，然后开始执行代码

 <script>
        let box = document.querySelector('.box')
        let i = 0
        //内部实现加法
        function mouseMove() {
            box.innerHTML = ++i
        }
        //节流函数
        function throttle(fn, t) {
            let time = 0
            return function () {
                //获取当前时间
                let nowTime = Date.now()
                if (nowTime - time > -t) {
                    fn()
                    time = nowTime
                }
            }
        }
        // 实现节流效果：移动后的时间 - 开始移动的时间 >=500 ms 
        //  然后开始调用 函数
        // 添加点击事件
        box.addEventListener('mousemove', throttle(mouseMove, 500))
    </script>

4.2 lodash中的节流防抖

<body>
    <div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>
        let div = document.querySelector('.box')
        let i =0
        function mouseMove() {
            div.innerHTML = ++i
        }
        // 实现节流
        // div.addEventListener('mousemove',_.throttle(mouseMove,1000))
        // 实现防抖
        div.addEventListener('mousemove',_.debounce(mouseMove,200))
    </script>
</body>

4.3 视频加载的节流实现

  <script>
        // 需求分析 打开视频界面，默认加载到上一次的视频结束事件
        // video.ontimeupdate  时评开始播放触发
        // video.currentTime 视频播放的当前时间
        // video.onloadeddata 页面已经加载，但是视频还没有触发

        let video = document.querySelector('video')
        // 设置节流 一秒将视频的时间存到本地存储
        video.ontimeupdate = _.throttle(function () {
            // 每隔1s ，将视频的当前时间存储到 本地存储
            //    console.log( video.currentTime);
            localStorage.setItem('CurrentTime', video.currentTime)
        }, 1000)


        video.onloadeddata = function () {
            // 将上一次缓存的时间 给视频的当前时间
            video.currentTime = localStorage.getItem('CurrentTime') | 0
        }
    </script>