JavaScript进阶(十二)

这是个栗子

已于 2025-05-23 20:44:04 修改

阅读量794

点赞数 9

分类专栏：前端知识之JS 文章标签： javascript 开发语言前端

于 2025-05-23 20:42:37 首次发布

本文链接：https://blog.csdn.net/weixin_52047874/article/details/148073231

版权

第三部分：JavaScript进阶

2. js库lodash里面cloneDeep内部实现了深拷贝

3. 通过JSON.stringify()实现

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

十二、深浅拷贝

开发中我们经常需要复制一个对象。如果直接用赋值会有下面问题：

12.1 浅拷贝

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

浅拷贝：拷贝的是地址常见方法

常见方法：

拷贝对象：Object.assgin() / 展开运算符...obj} 拷贝对象
拷贝数组：Array.prototype.concat() 或者[..arr]

总结：

1. 直接赋值和浅拷贝有什么区别?

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

2. 浅拷贝怎么理解?

拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址

12.2 深拷贝

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

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

常见方法：

1. 通过递归实现深拷贝
2. lodash/cloneDeep
3. 通过JSON.stringify()实现

1. 通过递归实现深拷贝

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

简单理解：函数内部自己调用自己，这个函数就是递归函数
递归函数的作用和循环效果类似
由于递归很容易发生“栈溢出”错误(stack overflow)，所以必须要加退出条件return

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

需求：
①页面每隔-秒输出当前的时间
②输出当前时间可以使用：new Date().toLocaleString()

通过递归函数实现深拷贝(简版)：

<!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>
</head>

<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>

</html>