• Java进阶知识点及案例总结（续2）

    深浅拷贝

    浅拷贝

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

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

    浅拷贝：拷贝的是地址

    常见方法：

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

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

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

    1.     const obj={
    2.       uname:'pink',
    3.       age:18,
    4.       family:{
    5.         baby:'小pink'
    6.       }
    7.     }
    8.     // const o=obj
    9.     // console.log(o)
    10.     // o.age=20
    11.     // console.log(o)
    12.     // console.log(obj)
    13.     // 浅拷贝
    14.     // const o={...obj}
    15.     // console.log(o)
    16.     // o.age=20
    17.     // console.log(o)
    18.     // console.log(obj)
    19.     const o={}
    20.     Object.assign(o,obj)
    21.     o.age=20
    22.     o.family.baby='老pink'
    23.     console.log(o)
    24.     console.log(obj)//obj里的family里的baby也改变了

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

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

    深拷贝（不改变原来对象或数组的值）

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

    常见方法：

    1.通过递归实现深拷贝

    函数递归：

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

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

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

    需求：

    • 页面每隔一秒输出当前的时间
    • 输出当前时间可以使用：new Date().toLocaleString()
    1.     function getTime(){
    2.       document.querySelector('div').innerHTML=new Date().toLocaleString()
    3.       setTimeout(getTime,1000)//1s之后执行该函数
    4.     }
    5.     getTime()
    2.lodash/cloneDeep
    1.      const obj={
    2.       uname:'pink',
    3.       age:18,
    4.       hobby:['乒乓球','足球']
    5.     }
    6.     const o={}
    7.     //拷贝函数
    8.     function deepCopy(newObj,oldObj){
    9.       for(let k in oldObj){
    10.         // 处理数组的问题 依次取出来进行赋值 一定先写数组后写对象 不能颠倒 
    11.         if(oldObj[k] instanceof Array){
    12.           newObj[k]=[]
    13.           deepCopy(newObj[k],oldObj[k])
    14.         }
    15.         ///处理对象问题
    16.         else if(oldObj[k] instanceof Object){
    17.           newObj[k]={}
    18.           deepCopy(newObj[k],oldObj[k])
    19.         }
    20.         else {
    21.           //k属性名 oldObj[k] 属性值
    22.         // newObj[k]===o.uname
    23.         newObj[k]=oldObj[k]//不可使用点 点为添加属性，而k是一个变量
    24.         }
    25.         
    26.       }
    27.     }
    28.     deepCopy(o,obj)//函数调用 两个参数o 新对象 obj 旧对象
    29.     console.log(o)
    30.     o.age=20
    31.     o.hobby[0]='篮球'
    32.     console.log(obj)

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

    1.     const obj={
    2.       uname:'pink',
    3.       age:18,
    4.       hobby:['乒乓球','足球'],
    5.       family:{
    6.         baby:'小pink'
    7.       }
    8.     }
    9.     const o=_.cloneDeep(obj)
    10.     console.log(o)
    11.     o.family.baby='老pink'
    12.     console.log(obj)
    3.通过JSON.stringify()实现
    1.     const obj={
    2.       uname:'pink',
    3.       age:18,
    4.       hobby:['乒乓球','足球'],
    5.       family:{
    6.         baby:'小pink'
    7.       }
    8.     }
    9.     //把对象转换为JSON字符串
    10.     console.log(JSON.stringify(obj))
    11.     const o=JSON.parse(JSON.stringify(obj))//先转换为字符串，后再转为对象，前后就变成了新的对象，就不会改变原来的值
    12.     console.log(o)
    13.     o.family.baby='123'
    14.     console.log(obj)

    异常处理

    throw抛异常

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

    总结:

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

    try/catch捕获异常

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

    总结：

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

    debugger

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

    处理this

    this指向

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

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

    1.     // 普通函数谁调用就指向谁
    2.     console.log(this)//window
    3.     function fn(){
    4.       console.log(this)//window
    5.     }
    6.     window.fn()
    7.     widow.setTimeout(function(){
    8.       console.log(this)//window
    9.     },1000)
    10.     document.querySelector('button').addEventListener('click',function(){
    11.       console.log(this)//指向button
    12.     })
    13.     const obj={
    14.       sayHi:function(){
    15.         console.log(this)//指向obj
    16.       }
    17.       
    18.     }
    19.     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：传递的其他参数
    • 返回值就是函数的返回值，因为他就是调用函数
    1.     const obj={
    2.       uname:'pink'
    3.     }
    4.     function fn(x,y){
    5.       console.log(this)//window
    6.       console.log(x+y)
    7.     }
    8.     // 1.调用函数
    9.     // 2.改变this指向
    10.     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()求数组的最大值
    1.       const obj={
    2.         age:18
    3.       }
    4.       function fn(x,y){
    5.         console.log(this)//{age:18}
    6.         console.log(x+y)
    7.       }
    8.       // 1.调用函数
    9.       // 2.改变this指向
    10.       fn.apply(obj,[1,2])//改变this指向obj并且传入一个数组，但是要用参数为数组的长度来接收
    11.       // 3.返回值 本身就是在调用函数 所以返回值就是函数的返回值
    12.       // 使用场景：求数组的最大值
    13.       const arr=[100,44,77]
    14.       const max=Math.max.apply(Math,arr)
    15.       const min=Math.min.apply(Math,arr)
    16.       console.log(max,min)
    17.       console.log(Math.max(...arr))
    18.       //求数组最大值的方法 遍历for循环 使用apply 使用展开运算符

    call和apply的区别

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

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

    语法：

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

     

     call apply bind总结

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

    区别点：

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

    主要应用场景：

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

    性能优化

    防抖(debounce)

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

    使用场景：

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

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

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

    实现方式：

    1.loadsh提供的防抖来处理

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>Documenttitle>
    9.   <style>
    10.     .box {
    11.       width: 500px;
    12.       height: 500px;
    13.       background-color: #ccc;
    14.       color: #fff;
    15.       text-align: center;
    16.       font-size: 100px;
    17.     }
    18.   style>
    19. head>
    20.  
    21. <body>
    22.   <div class="box">div>
    23.   <script src="../js进阶知识点/lodash.min.js">script>
    24.   <script>
    25.     // 利用防抖实现性能优化
    26.     // 需求：鼠标在盒子上移动，里面的数字就会变化
    27.     const box=document.querySelector('.box')
    28.     let i=1
    29.     function mouseMove(){
    30.       box.innerHTML=i++
    31.     }
    32.     // 添加事件
    33.     // box.addEventListener('mousemove',mouseMove)
    34.     // 利用Lodash库实现防抖-500ms之后采取+1
    35.     // 语法：_.deboumce(fun,时间)
    36.     box.addEventListener('mousemove',_.debounce(mouseMove,500))
    37.  
    38.   script>
    39. body>
    40.  
    41. html>

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

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

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

     节流-throttle

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

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

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

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

    实现方式：

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

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

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

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

    核心思路：

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

    1. 声明一个定时器变量
    2. 当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新的定时器
    3. 如果没有定时器则开启定时器，记得存到变量里面
    • 定时器里面调用执行的函数
    • 定时器里面要把定时器清空
    1.     // 利用防抖实现性能优化
    2.     // 需求：鼠标在盒子上移动，里面的数字就会变化
    3.     const box=document.querySelector('.box')
    4.     let i=1
    5.     function mouseMove(){
    6.       box.innerHTML=i++
    7.     }
    8.     // 添加事件
    9.     // box.addEventListener('mousemove',mouseMove)
    10.     // 利用Lodash库实现防抖-500ms之后采取+1
    11.     // 语法：_.deboumce(fun,时间)
    12.     // box.addEventListener('mousemove',_.debounce(mouseMove,500))
    13.     // 手写防抖函数
    14.     // 核心是利用setTimeout定时器来实现
    15.     // function debounce(fn,t){
    16.     //   let timer
    17.     //   return function(){
    18.     //     //2.3.4
    19.     //     if(timer)clearTimeout(timer)
    20.     //     timer=setTimeout(function(){
    21.     //       fn()//加小括号调用fn函数
    22.     //     },t)
    23.     //   }
    24.     // }
    25.     // box.addEventListener('mousemove',debounce(mouseMove,500))
    26.     ///
    27.     // 利用lodash库实现节流 500ms之后采取+1
    28.     // 语法：_.throttle(fun,时间)
    29.     // box.addEventListener('mousemove',_.throttle(mouseMove,2000))//2s之内最多执行一次函数，不管滑动多少次
    30.       function throttle(fn,t){
    31.         let timer=null
    32.         return function(){
    33.           if(!timer){
    34.             timer=setTimeout(function(){
    35.               fn()
    36.               // 在定时器里面清除定时器
    37.               //清空定时器当函数执行完毕之后再清除定时器
    38.               timer=null
    39.               // 在setTimeout中是无法删除定时器的，因为定时器还在运作，所以使用timer=null
    40.             },t)
    41.           }
    42.         }
    43.       }
    44.       box.addEventListener('mousemove',throttle(mouseMove,2000))

    防抖和节流总结

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

    综合案例

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

    分析：

    两个事件：

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

     思路：

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

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

  • 相关阅读:
    YOLOX加强特征提取网络Panet分析
    安装 eslint 配置指南 及 遇到的一些问题记录
    Spark系列—spark简介
    导出oracle远程数据库到本地
    WR | 水源水耐药基因稳定赋存的关键：以致病菌为“源”，群落构建主导菌为“汇”...
    测试十大法则
    计算机毕业设计（附源码）python在线教学系统
    go记录之——slice
    shadingjdbc实战分表分库
    供应链 | 顶会CIKM论文精读：面向大规模三维装箱问题的数据驱动树形搜索算法
  • 原文地址：https://blog.csdn.net/guai_guai_guai/article/details/138170823