JavaScript高级阶段Note4

业界资讯 2023-04-08 16:50:42 阅读次数: 0

JavaScript 进阶 - 第4天

1深浅拷贝

1.1浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

  1. 拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象
  2. 拷贝数组：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深拷贝

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

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

常见方法：

  1. 通过递归实现深拷贝
  2. lodash/cloneDeep
  3. 通过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>

总结：

  1. throw 抛出异常信息，程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. 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>

总结：

  1. try...catch 用于捕获错误信息
  2. 将预估可能发生错误的代码写在 try 代码段中
  3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息
  4. 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>

总结：

  1. call 方法能够在调用函数的同时指定 this 的值
  2. 使用 call 方法调用函数时，第1个参数为 this 指定的值,默认指向的是window
  3. 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>

总结：

  1. apply 方法能够在调用函数的同时指定 this 的值
  2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值
  3. 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节流防抖

  1. 防抖（debounce）
    所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  • 使用效果:搜索框，输入文字结束后，开始渲染请求数据
    面试：采用定时器，触发事件的时候，不断清除定时器，只有不触发事件的时候，执行代码
  1. 节流（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>

猜你喜欢

转载自blog.csdn.net/weixin_62643012/article/details/129381208
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022