Java进阶知识点及案例总结(续2)

深浅拷贝

浅拷贝

开发中我们经常需要复制一个对象或数组,如果直接使用赋值,当改变复制之后的对象或数组时,原对向也会改变,拷贝时我们需要改变复制之后的对象或数组的值,但不改变原对象或数组的值。

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

浅拷贝:拷贝的是地址

常见方法:

1.拷贝对象:Object.assign()/展开运算符{...obj}拷贝对象

2.拷贝数组:Array.prototype.concat()或者[...arr]

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

    const obj={
      uname:'pink',
      age:18,
      family:{
        baby:'小pink'
      }
    }
    // const o=obj
    // console.log(o)
    // o.age=20
    // console.log(o)
    // console.log(obj)
    // 浅拷贝
    // const o={...obj}
    // console.log(o)
    // o.age=20
    // console.log(o)
    // console.log(obj)
    const o={}
    Object.assign(o,obj)
    o.age=20
    o.family.baby='老pink'
    console.log(o)
    console.log(obj)//obj里的family里的baby也改变了

直接赋值和浅拷贝的区别:

  • 直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对象栈里面的地址
  • 浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响 

深拷贝(不改变原来对象或数组的值)

深拷贝拷贝的是对象,不是地址

常见方法:

1.通过递归实现深拷贝

函数递归:

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

  • 简单理解:函数内部自己调用自己,这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生”栈溢出“错误(stack overflow),所以必须加退出条件 return
    let i=1
    function fn(){
      console.log(`这是第${i}次`)
      if(i>=6){
        return
      }
      i++
      fn()
    }
    fn()

利用递归函数实现setTimeout模拟setInterval效果

需求:

  • 页面每隔一秒输出当前的时间
  • 输出当前时间可以使用:new Date().toLocaleString()
    function getTime(){
      document.querySelector('div').innerHTML=new Date().toLocaleString()
      setTimeout(getTime,1000)//1s之后执行该函数
    }
    getTime()
2.lodash/cloneDeep
     const obj={
      uname:'pink',
      age:18,
      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 {
          //k属性名 oldObj[k] 属性值
        // newObj[k]===o.uname
        newObj[k]=oldObj[k]//不可使用点 点为添加属性,而k是一个变量
        }
        
      }
    }
    deepCopy(o,obj)//函数调用 两个参数o 新对象 obj 旧对象
    console.log(o)
    o.age=20
    o.hobby[0]='篮球'
    console.log(obj)

 jsloadsh里面cloneDeep内部实现了深拷贝

    const obj={
      uname:'pink',
      age:18,
      hobby:['乒乓球','足球'],
      family:{
        baby:'小pink'
      }
    }
    const o=_.cloneDeep(obj)
    console.log(o)
    o.family.baby='老pink'
    console.log(obj)
3.通过JSON.stringify()实现
    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)

异常处理

throw抛异常

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

总结:

  1. throw抛出异常信息,程序也会终止执行
  2. throw后面跟的是错误提示信息
  3. Error对象配合throw使用,能够设置更详细的错误信息
    function fn(x,y){
      if(!x||!y){
        throw '没有参数传递进来'
        throw new Error('没有参数传递进来')
      }
      return x+y
    }
    console.log(fn())

try/catch捕获异常

我们可以通过try/catch捕获错误信息(浏览器提供的错误信息)try试试 catch拦住 finally 最后

总结:

  1. try...catch用于捕获错误信息
  2. 将预估可能发生错误的代码写在try代码段中
  3. 如果try代码段中出现错误后,会执行catch代码段,并截获到错误信息
  4. finally不管是否有错误,都会执行
  function fn(){
      try{
        // 可能发送错误的代码 要写到try里面
        const p=document.querySelector('.p')
        p.style.color='red'
      }catch(err){
        // 拦截错误 提示浏览器提供的错误信息 但是不中断程序的执行
        console.log(err.message)
        throw new Error('你看看,选择器错误了吧')
        // 需要加return中断程序
        // return
      }
      finally{
        //不管程序对不对,一定会执行的代码
        alert('弹出对话框')
      }
    }

debugger

在代码中间添加debugger,运行时会自动进入调试阶段

处理this

this指向

普通函数的调用方式决定了this的值,即谁调用this的值指向谁

普通函数没有明确调用者时this值为window,严格模式下没有调用者时this地值为undefined

    // 普通函数谁调用就指向谁
    console.log(this)//window
    function fn(){
      console.log(this)//window
    }
    window.fn()
    widow.setTimeout(function(){
      console.log(this)//window
    },1000)
    document.querySelector('button').addEventListener('click',function(){
      console.log(this)//指向button
    })
    const obj={
      sayHi:function(){
        console.log(this)//指向obj
      }
      
    }
    obj.sayHi()

 箭头函数中的this与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在this

  1. 箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的
  2. 箭头函数中的this引用的就是最近作用域中的this
  3. 向外层作用域中,一层一层查找this,知道有this的定义

注意1:在开发中【使用箭头函数前要考虑函数中this的值】,事件回调函数使用箭头函数时,this为全局的window,因此DOM事件回调函数如果需要DOM对象的this,则不推荐使用箭头函数

注意2:同样由于箭头函数this的原因,基于原型的面向对象也不推荐采用箭头函数

总结:

  1. 函数内不存在this,沿用上一级的
  2. 不适用:构造函数,原型函数,字面量对象中函数,dom事件函数等等
  3. 适用:需要使用上层this的地方 

改变this

JavaScript中还允许指定函数中this的指向,有3个方法可以动态指定普通函数中this的指向

  • call()

使用call方法调用函数,同时指定被调用函数中this的值

语法

fun.call(thisArg,arg1,arg2,...)
  • thisArg:在fun函数运行时指定的this值
  • arg1,arg2:传递的其他参数
  • 返回值就是函数的返回值,因为他就是调用函数
    const obj={
      uname:'pink'
    }
    function fn(x,y){
      console.log(this)//window
      console.log(x+y)
    }
    // 1.调用函数
    // 2.改变this指向
    fn.call(obj,1,2)//将fn this指向obj,并向fn中传入实参1,2
  • apply()

使用apply方法调用函数,同时指定被调用函数中this的值

语法

fun.apply(thisArg,[argsArray])
  • thisArg:在fun函数运行时指定的this值
  • argsArray:传递的值,必须包含在数组里面,传入的实参必须是数组
  • 返回值就是函数的返回值,因为它就是调用函数
  • 因此apply主要跟数组有关系,比如使用Math,max()求数组的最大值
      const obj={
        age:18
      }
      function fn(x,y){
        console.log(this)//{age:18}
        console.log(x+y)
      }
      // 1.调用函数
      // 2.改变this指向
      fn.apply(obj,[1,2])//改变this指向obj并且传入一个数组,但是要用参数为数组的长度来接收
      // 3.返回值 本身就是在调用函数 所以返回值就是函数的返回值
      // 使用场景:求数组的最大值
      const arr=[100,44,77]
      const max=Math.max.apply(Math,arr)
      const min=Math.min.apply(Math,arr)
      console.log(max,min)
      console.log(Math.max(...arr))
      //求数组最大值的方法 遍历for循环 使用apply 使用展开运算符

call和apply的区别

  • 都是调用函数,都能改变this的指向
  • 参数不一样,apply传递的必须是数组 
  • bind()

bind()方法不会调用函数,但是能改变函数内部this指向

语法:

fun.bind(thisArg,arg1,arg2,...)
  • thisArg:在fun函数运行时指定的this值
  • arg1,arg2:传递的其他参数
  • 返回由指定的this值和初始化参数改造的原函数拷贝(新函数)
  • 因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用bind,比如改变定时器内部的this指向
    const obj={
      age:18
    }
    function fn(){
      console.log(this)
    }
    // 1.bind不会调用函数
    // 2.能改变this指向
    // 3.返回值是个函数 但是这个函数里面的this是更改过的obj
    const fun=fn.bind(obj)
    console.log(fun)
    fun()
    // 需求 有一个按钮 点击里面就禁用 2秒钟之后开启
    const btn=document.querySelector('button')
    btn.addEventListener('click',function(){
      // 禁用按钮
      this.disabled=true
      window.setTimeout(function(){//匿名函数this指向window
        // 在这个函数里面 我们要this由原来的window改为btn
        this.disabled=false
      }.bind(this),2000)
    })

 

 call apply bind总结

相同点:都可以改变函数内部的this指向

区别点

  • call和apply会调用函数,并且改变函数内部this指向
  • call传递参数arg1,arg2...形式,apply必须使用数组形式[arg]
  • bind不会调用函数,可以改变函数内部this指向

主要应用场景

  • call调用函数并且可以传递参数
  • apply经常跟数组有关系,比如借助于数组对象实现数组最大值和最小值
  • bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向

性能优化

防抖(debounce)

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

使用场景

  • 搜索框搜索输入,只需用户最后一次输入完,再发送请求
  • 手机号,邮箱验证输入检测

利用防抖来处理-鼠标滑过盒子显示文字

要求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1

实现方式:

1.loadsh提供的防抖来处理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="../js进阶知识点/lodash.min.js"></script>
  <script>
    // 利用防抖实现性能优化
    // 需求:鼠标在盒子上移动,里面的数字就会变化
    const box=document.querySelector('.box')
    let i=1
    function mouseMove(){
      box.innerHTML=i++
    }
    // 添加事件
    // box.addEventListener('mousemove',mouseMove)
    // 利用Lodash库实现防抖-500ms之后采取+1
    // 语法:_.deboumce(fun,时间)
    box.addEventListener('mousemove',_.debounce(mouseMove,500))

  </script>
</body>

</html>

2.手写一个防抖函数处理

核心思路:防抖的核心思路就是利用定时器(setTimeout)l来实现

  1. 声明一个定时器变量
  2. 当鼠标每次滑动都先判断是否有定时器了,如果有定时器先清除以前的定时器
  3. 如果没有定时器,则开启定时器,记得存到变量里面
  4. 定时器里面调用要执行的函数
    // 利用防抖实现性能优化
    // 需求:鼠标在盒子上移动,里面的数字就会变化
    const box=document.querySelector('.box')
    let i=1
    function mouseMove(){
      box.innerHTML=i++
    }
    
    function debounce(fn,t){
      let timer
      return function(){
        //2.3.4
        if(timer)clearTimeout(timer)
        timer=setTimeout(function(){
          fn()//加小括号调用fn函数
        },t)
      }
    }
    box.addEventListener('mousemove',debounce(mouseMove,500))

 节流-throttle

节流:单位时间内,频繁触发事件,只执行一次

使用场景:高频事件:鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动scroll等

利用节流来处理-鼠标滑过盒子显示文字

要求:鼠标在盒子上移动,不管移动多少次,每隔500ms才+1

实现方式:

1.lodash提供的节流函数来处理

    // 利用lodash库实现节流 500ms之后采取+1
    // 语法:_.throttle(fun,时间)
    box.addEventListener('mousemove',_.throttle(mouseMove,2000))//2s之内最多执行一次函数,不管滑动多少次

2.手写一个节流函数来处理

鼠标在盒子上移动,不管移动多少次,每隔500ms才+1

核心思路

节流的核心就是利用定时器(setTimeout)来实现

  1. 声明一个定时器变量
  2. 当鼠标每次滑动都先判断是否有定时器了,如果有定时器则不开启新的定时器
  3. 如果没有定时器则开启定时器,记得存到变量里面
  • 定时器里面调用执行的函数
  • 定时器里面要把定时器清空
    // 利用防抖实现性能优化
    // 需求:鼠标在盒子上移动,里面的数字就会变化
    const box=document.querySelector('.box')
    let i=1
    function mouseMove(){
      box.innerHTML=i++
    }
    // 添加事件
    // box.addEventListener('mousemove',mouseMove)
    // 利用Lodash库实现防抖-500ms之后采取+1
    // 语法:_.deboumce(fun,时间)
    // box.addEventListener('mousemove',_.debounce(mouseMove,500))
    // 手写防抖函数
    // 核心是利用setTimeout定时器来实现
    // function debounce(fn,t){
    //   let timer
    //   return function(){
    //     //2.3.4
    //     if(timer)clearTimeout(timer)
    //     timer=setTimeout(function(){
    //       fn()//加小括号调用fn函数
    //     },t)
    //   }
    // }
    // box.addEventListener('mousemove',debounce(mouseMove,500))
    ///
    // 利用lodash库实现节流 500ms之后采取+1
    // 语法:_.throttle(fun,时间)
    // box.addEventListener('mousemove',_.throttle(mouseMove,2000))//2s之内最多执行一次函数,不管滑动多少次
      function throttle(fn,t){
        let timer=null
        return function(){
          if(!timer){
            timer=setTimeout(function(){
              fn()
              // 在定时器里面清除定时器
              //清空定时器当函数执行完毕之后再清除定时器
              timer=null
              // 在setTimeout中是无法删除定时器的,因为定时器还在运作,所以使用timer=null
            },t)
          }
        }
      }
      box.addEventListener('mousemove',throttle(mouseMove,2000))

防抖和节流总结

性能优化说明使用场景
防抖单位时间内,频繁触发事件,只执行最后一次搜索框搜索输入,邮箱验证输入检测
节流单位时间内,频繁触发事件,只执行一次高频事件:鼠标移动mousemove,页面尺寸缩放resize、滚动条滚动scroll等等

综合案例

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

分析:

两个事件:

  1. ontimeupdate 事件在视频/音频(audio/video)当前的播放位置发送改变时触发
  2. onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频的下一帧时触发

 思路:

  1. 在ontimeupdate事件触发的时候,每隔一秒钟,就记录当前时间到本地存储
  2. 下次打开页面,onloadeddata事件触发,就可以从本地存储取出时间,让视频从取出的时间播放,如果没有就默认为0s
  3. 获得当前时间 video.currentTime
    // 1.获取元素 要对视频进行操作
    const video=document.querySelector('video')
    // 当前播放位置发生改变时触发
    // video.ontimeupdate=function(){
    //   console.log(11)
    // }
    video.ontimeupdate=_.throttle(()=>{
      console.log(video.currentTime)//获得当前的时间
      localStorage.setItem('currentTime',video.currentTime)//把当前的时间存储到本地存储中
    },1000)//1s之后调用一次函数
    // 打开页面触发事件,就从本地存储里面取出记录的时间,赋值给vodeo.currentTime
    video.onloadeddata=()=>{
      // console.log(111)
      video.currentTime=localStorage.getItem('currentTime')||0//前面为假就执行后面的代码
    }

以上笔记均为学习哔站pink老师视频所得!

  • 13
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值