深浅拷贝的区别

最新推荐文章于 2024-09-11 17:09:49 发布

normi-D18

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量51

点赞数

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

本文链接：https://blog.csdn.net/weixin_47175934/article/details/128541238

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了JavaScript中浅拷贝和深拷贝的概念，浅拷贝包括使用Object.assign()和展开运算符，只适合单层对象；深拷贝可通过递归实现或使用lodash的cloneDeep方法，以及借助JSON.stringify()。文中通过示例展示了它们的区别，特别是在处理复杂数据类型时的差异。

摘要由CSDN通过智能技术生成

1浅拷贝

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

浅拷贝：拷贝的是地址

常见方法：

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

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解：如果是单层对象，没问题，如果有多层就有问题)（改变地址后会影响

不足：

浅拷贝只适合单层，里面不能再有复杂数据类型，不然还是拷贝地址

如果是简单数据类型拷贝值，引用数据类型拷贝地址

（简单理解：如果是单层对象，没问题，如果有多层，有问题）

到原来的值）

2深拷贝

深拷贝：拷贝的是对象，不是地址，思想是递归

实现深拷贝的常见方法：

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

 const obj = {//对象
     uname: 'pink',
       age: 19
     }
     // 3使用场景：适用于对象都是简单数据类型
    // 浅拷贝和深拷贝只针对于引用类型

//浅拷贝
    // 方法1：展开运算符
    const o = { ...obj }
    console.log(o);
    o.age = 20
    console.log(o.age);//20
    console.log(obj.age);//19

    // 方法2：assign
    const o = {}
    Object.assign(o, obj)
    o.age = 20
    console.log(o.age);//20
    console.log(obj.age);//19
    
//深拷贝
  const obj = {
    uname: 'Normi',
    age: 22,
    hobby: ['篮球', '排球']
  }

  // 1递归
  // const o = {}
  // function fn(newObj, oldObj) {
  //   for (let k in oldObj) {
  //     if (oldObj[k] instanceof Array) {//✿
  //       newObj[k] = [] // ✿
  //       fn(newObj[k], oldObj[k])

  //     } else {

  //       newObj[k] = oldObj[k]//简单数据类型赋值
  //     }
  //   }
  // }
  // fn(o, obj)
  // console.log(o);
  // o.hobby[0] = '我修改了'
  // console.log(o);
  // console.log(obj);

  // 2lodash
  // const o = _.cloneDeep(obj)


  // 3:JSON
  const o = JSON.parse(JSON.stringify(obj))