JS深拷贝、浅拷贝以及如何实现深拷贝（包括日期类型的和正则类型）

最新推荐文章于 2024-02-13 19:59:44 发布

原创最新推荐文章于 2024-02-13 19:59:44 发布 · 924 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文探讨了JavaScript中深拷贝和浅拷贝的区别，由于基本数据类型和引用数据类型存储方式的不同导致了拷贝行为的差异。深拷贝可以确保副本与原对象独立，文中提供了两种实现深拷贝的方法：JSON序列化和自定义函数。尽管JSON方法简单但存在丢失某些类型数据的问题，自定义函数则能更全面地处理各种复杂对象。

基本数据类型：undefined、null、number、boolean、string、symbol
引用数据类型：object（数组、函数等都属于引用数据类型）
1、为什么会有深拷贝浅拷贝区别？
因为引用数据类型和基本数据类型的存储方式不同，因而有了深浅拷贝之分。基本类型直接存放在栈内存中，而引用类型栈内存中存放的是该对象在堆内存的起始地址，真正数据是存放在堆内存中的。

基本数据类型复制，直接开辟新的栈内存空间，两者互不影响，因为位深拷贝。而引用类型复制，则是复制栈内存中存放的地址，两地址同时指向一个堆内存，两者相互影响，所以为浅拷贝。
在这里插入图片描述

2、如何实现深拷贝呢？
方案一：
使用JSON.stringify()进行字符串转换，再通过JSON.prase（）进行反转。

const arr = [
	{ a: new Date(), aa: new RegExp('\\w+'), aaa: function() { console.log('aaa function') } }, 
	{ b: 'qwe' }, 
	{ c: [null, undefined] }, 
	{ d: [{ da: 1, db: { dba: 123 }}] }
]
const copyArr = JSON.parse(JSON.stringify(arr))
console.log(copyArr)

不足：
1、日期类型的数据会直接变成字符串的形式，而不是对象的形式
2、正则类型的数据会变成空对象{}
3、函数会丢失
优点：能够满足大部分的业务需求、代码量少
方案二：
自定义实现深拷贝函数

deepClone(obj) {
  if (obj === null || typeof obj !== "object") {
    return obj;
  }
  //date类型
  if (obj instanceof Date) {
    const copydata = new Date();
    copydata.setTime(obj.getTime());
    return copydata
  }
  //正则
  if(obj instanceof RegExp){
    const Constructor = obj.Constructor;  //constructor 属性返回对创建此对象的数组函数的引用
    return new Constructor(obj)
  }
  if (obj instanceof Array || obj instanceof Object){  //数组以及引用类型
        const copyObj = Array.isArray(obj) ? [] : {}
        for( var i in obj){
          copyObj[i]=typeof obj[i]=='object'deepClone(obj[i]):obj[i];
        }
        return copyObj;
  }
},

标签

#js