• 前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶（四）完结撒花✿✿ヽ(°▽°)ノ✿

    思维导图

    高阶技巧

    1. 深浅拷贝

    1.1 浅拷贝

    1.2 深拷贝

    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. head>
    10.  
    11. <body>
    12.   <div>div>
    13.   <script>
    14.     function getTime() {
    15.       document.querySelector('div').innerHTML = new Date().toLocaleString()
    16.       setTimeout(getTime, 1000)
    17.     }
    18.     getTime()
    19.   script>
    20. body>
    21.  
    22. html>

    递归函数实现深拷贝

    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. head>
    10.  
    11. <body>
    12.   <script>
    13.     const obj = {
    14.       uname: 'pink',
    15.       age: 18,
    16.       hobby: ['乒乓球', '足球'],
    17.       family: {
    18.         baby: '小pink'
    19.       }
    20.     }
    21.     const o = {}
    22.     // 拷贝函数
    23.     function deepCopy(newObj, oldObj) {
    24.       debugger
    25.       for (let k in oldObj) {
    26.         // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
    27.         if (oldObj[k] instanceof Array) {
    28.           newObj[k] = []
    29.           //  newObj[k] 接收 []  hobby
    30.           //  oldObj[k]   ['乒乓球', '足球']
    31.           deepCopy(newObj[k], oldObj[k])
    32.         } else if (oldObj[k] instanceof Object) {
    33.           newObj[k] = {}
    34.           deepCopy(newObj[k], oldObj[k])
    35.         }
    36.         else {
    37.           //  k  属性名 uname age    oldObj[k]  属性值  18
    38.           // newObj[k]  === o.uname  给新对象添加属性
    39.           newObj[k] = oldObj[k]
    40.         }
    41.       }
    42.     }
    43.     deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    44.     console.log(o)
    45.     o.age = 20
    46.     o.hobby[0] = '篮球'
    47.     o.family.baby = '老pink'
    48.     console.log(obj)
    49.     console.log([1, 23] instanceof Object)
    50.     // 复习
    51.     // const obj = {
    52.     //   uname: 'pink',
    53.     //   age: 18,
    54.     //   hobby: ['乒乓球', '足球']
    55.     // }
    56.     // function deepCopy({ }, oldObj) {
    57.     //   // k 属性名  oldObj[k] 属性值
    58.     //   for (let k in oldObj) {
    59.     //     // 处理数组的问题   k 变量
    60.     //     newObj[k] = oldObj[k]
    61.     //     // o.uname = 'pink'
    62.     //     // newObj.k  = 'pink'
    63.     //   }
    64.     // }
    65.   script>
    66. body>
    67.  
    68. html>

    lodash实现深拷贝

    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. head>
    10.  
    11. <body>
    12.   
    13.   <script src="./lodash.min.js">script>
    14.   <script>
    15.     const obj = {
    16.       uname: 'pink',
    17.       age: 18,
    18.       hobby: ['乒乓球', '足球'],
    19.       family: {
    20.         baby: '小pink'
    21.       }
    22.     }
    23.     const o = _.cloneDeep(obj)
    24.     console.log(o)
    25.     o.family.baby = '老pink'
    26.     console.log(obj)
    27.   script>
    28. body>
    29.  
    30. html>

    利用JSON实现深拷贝

    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. head>
    10.  
    11. <body>
    12.   <script>
    13.     const obj = {
    14.       uname: 'pink',
    15.       age: 18,
    16.       hobby: ['乒乓球', '足球'],
    17.       family: {
    18.         baby: '小pink'
    19.       }
    20.     }
    21.     // 把对象转换为 JSON 字符串
    22.     // console.log(JSON.stringify(obj))
    23.     const o = JSON.parse(JSON.stringify(obj))
    24.     console.log(o)
    25.     o.family.baby = '123'
    26.     console.log(obj)
    27.   script>
    28. body>
    29.  
    30. html>

    2.异常处理

    2.1 throw 抛异常

    2.2 try/catch 捕获错误信息

    2.3 debugger

    3.处理this

    3.1 this指向

    普通函数

    箭头函数

    3.2 改变this

    call()

    apply()

    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. head>
    10.  
    11. <body>
    12.   <script>
    13.     const obj = {
    14.       age: 18
    15.     }
    16.     function fn(x, y) {
    17.       console.log(this) // {age: 18}
    18.       console.log(x + y)
    19.     }
    20.     // 1. 调用函数
    21.     // 2. 改变this指向 
    22.     //  fn.apply(this指向谁, 数组参数)
    23.     fn.apply(obj, [1, 2])
    24.     // 3. 返回值   本身就是在调用函数，所以返回值就是函数的返回值
    25.  
    26.     // 使用场景： 求数组最大值
    27.     // const max = Math.max(1, 2, 3)
    28.     // console.log(max)
    29.     const arr = [100, 44, 77]
    30.     const max = Math.max.apply(Math, arr)
    31.     const min = Math.min.apply(null, arr)
    32.     console.log(max, min)
    33.     // 使用场景： 求数组最大值
    34.     console.log(Math.max(...arr))
    35.   script>
    36. body>
    37.  
    38. html>

    bind()-重点

    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. head>
    10.  
    11. <body>
    12.   <button>发送短信button>
    13.   <script>
    14.     const obj = {
    15.       age: 18
    16.     }
    17.     function fn() {
    18.       console.log(this)
    19.     }
    20.  
    21.     // 1. bind 不会调用函数 
    22.     // 2. 能改变this指向
    23.     // 3. 返回值是个函数，  但是这个函数里面的this是更改过的obj
    24.     const fun = fn.bind(obj)
    25.     // console.log(fun) 
    26.     fun()
    27.  
    28.     // 需求，有一个按钮，点击里面就禁用，2秒钟之后开启
    29.     document.querySelector('button').addEventListener('click', function () {
    30.       // 禁用按钮
    31.       this.disabled = true
    32.       window.setTimeout(function () {
    33.         // 在这个普通函数里面，我们要this由原来的window 改为 btn
    34.         this.disabled = false
    35.       }.bind(this), 2000)   // 这里的this 和 btn 一样
    36.     })
    37.   script>
    38. body>
    39.  
    40. html>

    4.性能优化

    4.1 防抖

    lodash提供的防抖处理

    _.debounce(mouseMove, 500)

    手写防抖

    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>
    24.     const box = document.querySelector('.box')
    25.     let i = 1  // 让这个变量++
    26.     // 鼠标移动函数
    27.     function mouseMove() {
    28.       box.innerHTML = ++i
    29.       // 如果里面存在大量操作 dom 的情况，可能会卡顿
    30.     }
    31.     // 防抖函数
    32.     function debounce(fn, t) {
    33.       let timeId
    34.       return function () {
    35.         // 如果有定时器就清除
    36.         if (timeId) clearTimeout(timeId)
    37.         // 开启定时器 200
    38.         timeId = setTimeout(function () {
    39.           fn()
    40.         }, t)
    41.       }
    42.     }
    43.     // box.addEventListener('mousemove', mouseMove)
    44.     box.addEventListener('mousemove', debounce(mouseMove, 200))
    45.  
    46.   script>
    47. body>
    48.  
    49. html>

    4.2 节流

    lodash实现节流

    手动实现节流

    所以使用timer = null 清空定时器

    5.综合案例

    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.   <meta name="referrer" content="never" />
    9.   <title>综合案例title>
    10.   <style>
    11.     * {
    12.       padding: 0;
    13.       margin: 0;
    14.       box-sizing: border-box;
    15.     }
    16.  
    17.     .container {
    18.       width: 1200px;
    19.       margin: 0 auto;
    20.     }
    21.  
    22.     .video video {
    23.       width: 100%;
    24.       padding: 20px 0;
    25.     }
    26.  
    27.     .elevator {
    28.       position: fixed;
    29.       top: 280px;
    30.       right: 20px;
    31.       z-index: 999;
    32.       background: #fff;
    33.       border: 1px solid #e4e4e4;
    34.       width: 60px;
    35.     }
    36.  
    37.     .elevator a {
    38.       display: block;
    39.       padding: 10px;
    40.       text-decoration: none;
    41.       text-align: center;
    42.       color: #999;
    43.     }
    44.  
    45.     .elevator a.active {
    46.       color: #1286ff;
    47.     }
    48.  
    49.     .outline {
    50.       padding-bottom: 300px;
    51.     }
    52.   style>
    53. head>
    54.  
    55. <body>
    56.   <div class="container">
    57.     <div class="header">
    58.       <a href="http://pip.itcast.cn">
    59.         <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
    60.       a>
    61.     div>
    62.     <div class="video">
    63.       <video src="https://v.itheima.net/LapADhV6.mp4" controls>video>
    64.     div>
    65.     <div class="elevator">
    66.       <a href="javascript:;" data-ref="video">视频介绍a>
    67.       <a href="javascript:;" data-ref="intro">课程简介a>
    68.       <a href="javascript:;" data-ref="outline">评论列表a>
    69.     div>
    70.   div>
    71.   <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">script>
    72.   <script>
    73.     // 1. 获取元素  要对视频进行操作
    74.     const video = document.querySelector('video')
    75.     video.ontimeupdate = _.throttle(() => {
    76.       // console.log(video.currentTime) 获得当前的视频时间
    77.       // 把当前的时间存储到本地存储
    78.       localStorage.setItem('currentTime', video.currentTime)
    79.     }, 1000)
    80.  
    81.     // 打开页面触发事件，就从本地存储里面取出记录的时间， 赋值给  video.currentTime
    82.     video.onloadeddata = () => {
    83.       // console.log(111)
    84.       video.currentTime = localStorage.getItem('currentTime') || 0
    85.     }
    86.  
    87.   script>
    88. body>
    89.  
    90. html>

  • 相关阅读:
    《鸿蒙生态应用开发白皮书》读后感
    DAC8563数模转换模块的使用介绍
    2019CCPC网络赛 杭电 6705 path（题解+代码）
    npm命令大全
    jetl标签的使用
    大一作业HTML网页作业 HTML校园篮球网页作业(12个页面)
    Java项目:水果生鲜超市商城管理系统(java+SSM+JSP+jQuery+Mysql)
    一份详实的 Scrapy 爬虫教程，从原理到实战
    HTML做一个个人博客页面（纯html代码）
    孩子升年级难适应？猿辅导语文金牌教研来支招
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/133789846