js进阶 Day04浅拷贝,深拷贝,异常处理,try,catch,finally,throw,debugger,this指向,防抖,节流

最新推荐文章于 2024-10-02 05:39:15 发布

瑜～

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量51

点赞数

分类专栏：前端javascript进阶文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52284271/article/details/132824140

版权

前端javascript进阶专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

在这里插入图片描述
面试题：深拷贝怎么实现？
答：1.深拷贝用到函数递归
2.当我们在普通拷贝时直接赋值就可以，遇到数组直接调用这个递归即可
3.如果遇到的是对象形式，再次利用递归把对象解决
先Array后对象Object
在这里插入图片描述

debugger帮助断点调试

数组求和的几种方法:apply方法和…方法


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
   
    //  使用场景：求数组最大值
    const arr = [33, 88, 55]
    const max = Math.max.apply(Math, arr)
    // console.log(max)
    // 求数组最小值
    const min = Math.min.apply(Math, arr)
    console.log(max, min)


    //  2.使用场景：求数组最大值
    console.log(Math.max(...arr))


  </script>
</body>

</html>

在这里插入图片描述

Q:手写防抖函数核心?
A:核心是利用setTimeout定时器来实现

防抖函数代码

<!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>
  <script src="./lodash.min.js"></script>
  <div class="box"></div>
  <script>
    // 利用防抖实现性能优化
    // 需求：  鼠标在盒子上移动，里面的数字就会变化 +1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
      // 如果存在大量消耗性能的代码，比如dom操作 比如数组处理 可能会造成卡顿
    }
    // box.addEventListener('mousemove', mouseMove)

    // 利用lodash库实现防抖  -  500毫秒之后采取+1
    // 语法：_.debounce(fun,时间)

    // box.addEventListener('mousemove', _.debounce(mouseMove, 500))


    //  手写防抖函数
    // 核心是利用setTimeout定时器来实现

    // 1.声明定时器变量
    // 2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
    // 3.如果没有定时器，则可开启定时器，存入到定时器变量里面
    // 4.定时器里面写函数声明
    function debounce(fn, t) {
      let timer
      // return 返回一个匿名函数
      return function () {
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
          fn()  //加（）调用fn函数
        }, t)
      }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 500))

    // debounce(mouseMove, 500) = function () { 2.3.4 }
  </script>
</body>

</html>

在这里插入图片描述
在setTimeout中是无法删除定时器的，因为定时器还在运作，所以使用timer = null 而不是clearTimerout(timer)

性能优化之节流

<!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>
  <script src="./lodash.min.js"></script>
  <div class="box"></div>
  <script>
    // 利用节流实现性能优化
    // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++

    }
    // box.addEventListener('mousemove', mouseMove)
    // 利用lodash库实现节流 -500毫秒之后采取+1
    // 语法: _.throttle(fun,时间)
    // box.addEventListener('mousemove', _.throttle(mouseMove, 500))


    // 手写一个节流函数   每隔500ms + 1
    // 节流的核心就是利用定时器（setTimeout）来实现
    // 1.声明一个定时器变量
    // 2.当鼠标每次滑动都先判断是否开启定时器了，如果有定时器则不开启新定时器
    // 3.如果没有定时器则开启定时器，记得存到变量里面
    // 3.1定时器里面有调用执行的函数
    // 3.2定时器李米娜要把定时器清空
    function throttle(fn, t) {
      let timer = null
      return function () {
        if (!timer) {
          timer = setTimeout(function () {
            fn()
            // 清空定时器
            timer = null
          }, t)
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 2000))

    // 在setTimeout中是无法删除定时器的，因为定时器还在运作，所以使用timer = null 而不是clearTimerout(timer)
  </script>
</body>

</html>

节流综合案例

<!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" />
  <meta name="referrer" content="never" />
  <title>综合案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .video video {
      width: 100%;
      padding: 20px 0;
    }

    .elevator {
      position: fixed;
      top: 280px;
      right: 20px;
      z-index: 999;
      background: #fff;
      border: 1px solid #e4e4e4;
      width: 60px;
    }

    .elevator a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #999;
    }

    .elevator a.active {
      color: #1286ff;
    }

    .outline {
      padding-bottom: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="elevator">
      <a href="javascript:;" data-ref="video">视频介绍</a>
      <a href="javascript:;" data-ref="intro">课程简介</a>
      <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    // 获取元素
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(() => {
      // console.log(video.currentTime)   //获得当前时间

      // 把当前时间存储到本地存储中
      localStorage.setItem('currentTime', video.currentTime)
    }, 1000)

    // 打开页面触发事件，就从本地数据中去除存储的时间   赋值给video:currentTime
    video.onloadeddata = () => {
      video.currentTime = localStorage.getItem('currentTime') || 0
    }
  </script>
</body>

</html>