【js基础】深拷贝和浅拷贝的区别,实现深拷贝的几种方法及优缺点

本文介绍了计算机内存中的栈和堆的区别,以及浅拷贝与深拷贝的概念。重点讲解了如何实现深拷贝,包括使用JSON格式拷贝、扩展运算符拷贝以及手写深拷贝函数的方法,并分析了各种方法的优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.内存中的栈和堆:

栈(stack):1.只存放简单数据类型(Undefined,String,Boolean,Null,Number),和复杂数据类型的引用。

                  2.会自动分配内存空间,会自动释放。

堆(heap):1.存放复杂数据类型。

                  2.动态分配的内存,大小不定也不会自动释放。

二、浅拷贝和深拷贝的区别

1.浅拷贝:是只复制了该复杂数据存储在栈内存中的地址(引用),而不是在内存中重新开辟一个新的存储空间用于存储新的对象。

 var a={}

var b=a; 

//这种方式就是b浅拷贝a,若b对象属性发生改变,a对象也改变,实质上就是因为他们指向的是同一个堆内存中的对象

2.深拷贝:在堆内存中开辟一个新的存储空间,完完全全的拷贝一整个一模一样的对象

三、实现深拷贝的几种方法

1.JSON格式拷贝

  • 缺点: 1.bigint类型无法转换

                   2.undefined,symbol,function类型会丢失对应的属性

                  3.error,regexp的属性值会序列化变成空对象

                  4.date类型会被转成字符串类型

                  5.obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null;

 

const obj={
  name:"",
  number:NaN,
  date: [new Date(1536626600000), new Date(1540046600000)],
}
console.log("oldobj",obj)
let str=JSON.stringify(obj)
let newobj=JSON.parse(str)
console.log("newobj",newobj)

2.扩展运算符拷贝

  • 缺点:只有一级属性为深拷贝,二级属性之后都为浅拷贝
    let newobj={...obj}

 3.手写深拷贝

function copy(obj,hash=new WeakMap()){
  if(obj == null){return} 
  if(obj instanceof Date){return new Date(obj)} 
  if(obj instanceof RegExp){return new RegExp(obj)} 
   //将以上几种特殊类型直接copy返回
  if(hash.has(obj)){
    return hash.get(obj) //查表,存在就不重复拷贝,解决循环冗余
  }
  let newobj={}
   //递归拷贝并存表
  hash.set(obj,newobj)
  for(let i in obj)
    {
      if(obj[i] instanceof Object)
      {
        newobj[i]=copy(obj[i],hash)
      }else{
        newobj[i]=obj[i]
      }
    }
  return newobj

}

### 深拷贝浅拷贝区别实现方式 #### 区别 深拷贝浅拷贝的主要区别在于如何处理引用类型的数据。 - **浅拷贝**:仅复制对象的第一层属性,如果这些属性是引用类型,则只会复制其引用地址而非实际内容。因此,当原始对象的内容发生变化时,浅拷贝得到的新对象也会受到影响[^2]。 - **深拷贝**:不仅复制对象本身,还会递归地复制对象内部所有的嵌套层次及其引用类型的值,从而确保新对象与原对象完全独立[^1]。 #### 实现方式 ##### 浅拷贝实现 可以通过多种方式进行浅拷贝操作: - 使用 `Object.assign()` 方法来完成简单的浅拷贝: ```javascript const obj1 = { a: 1, b: { c: 2 } }; const obj2 = Object.assign({}, obj1); ``` 这里需要注意的是,`obj2.b` `obj1.b` 的引用实际上是相同的,即它们仍然指向同一个内存位置[^4]。 - 利用扩展运算符 (`...`) 来进行浅拷贝: ```javascript const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { ...obj1 }; ``` ##### 深拷贝实现 由于深拷贝需要逐级复制整个对象树,其实现有一定难度,以下是几种常见的实现方法: - **JSON 序列化/反序列化**:这是最简单的一种深拷贝方式,适用于不包含特殊数据类型(如函数、Symbol、undefined 等)的情况。 ```javascript const obj1 = { a: 1, b: { c: 2 } }; const deepCopyObj = JSON.parse(JSON.stringify(obj1)); ``` 此种方法虽然方便快捷,但对于复杂对象可能会存在问题,比如无法正确处理循环引用或特定数据类型[^2]。 - **手动递归克隆**:为了克服上述局限性,可以编写自定义函数来进行深层次的递归拷贝。 ```javascript function deepClone(obj) { if (typeof obj !== 'object' || obj === null) return obj; let clone = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key]); } } return clone; } const obj1 = { a: 1, b: { c: 2 }, d: [3, 4], e: new Date() }; // 假设e是一个日期实例 const deepCopyObj = deepClone(obj1); console.log(deepCopyObj.e instanceof Date); // true ``` - **利用第三方库**:像 Lodash 提供了专门用于深拷贝的功能 `_cloneDeep()` ,它能够很好地解决各种特殊情况下的深拷贝需求。 ```javascript const _ = require('lodash'); const obj1 = { a: 1, b: { c: 2 } }; const deepCopyObj = _.cloneDeep(obj1); ``` ### 结论 综上所述,无论是深拷贝还是浅拷贝都有各自的优缺点以及适用范围,在具体应用过程中需根据实际情况选择合适的策略[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值