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

最新推荐文章于 2025-03-26 19:44:02 发布

原创最新推荐文章于 2025-03-26 19:44:02 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #算法

js基础专栏收录该内容

5 篇文章

订阅专栏

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

一.内存中的栈和堆：

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

}