JavaScript 里的深拷贝和浅拷贝

JavaScript 里的深拷贝和浅拷贝

JS中数据类型分为基本数据类型引用数据类型

基本类型值指的是那些保存在 内存中的简单数据段。包含NumberStringBooleanNullUndefinedSymbol

引用类型值指的是那些保存在 内存中的对象,所以引用类型的值保存的是一个指针,这个指针指向对象的地址。引用类型包含Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。

因为引用类型保存的是指向存储地址的指针,所以我们直接把一个引用类型赋值给另外一个引用类型时候,相当于是把指针赋值过去,实际上两个对象的存储地址是一样的。因此也就导致这两个对象共用地址,只要地址里的数据被修改后,两个对象的值都会改变。

浅拷贝的实现方式

1.Array.concat()
js 复制代码
const arr = [1,2,3];
const copy = arr.concat(); 
console.log(copy); // 输出: [1, 2, 3]
2.Object.assign()
js 复制代码
const arr= [1,2,3];
const copy1 = Object.assign({}, arr); 
console.log(copy); // 输出: [1, 2, 3]
3.slice()
js 复制代码
const arr= [1,2,3];
let copy = arr.slice();  
console.log(copy); // 输出: [1, 2, 3]
4.扩展运算符 ...
js 复制代码
const arr= [1,2,3];
const copy = [...arr];
console.log(copy); // 输出: [1, 2, 3]

深拷贝

1.JSON.parse()和JSON.stringify()
js 复制代码
const obj1 = {
    x: 1, 
    y: {
        m: 1
    }
};
const obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2) //{x: 1, y: {m: 1}}

1.这是最简单的方法之一,但它有一些限制,比如不能正确处理函数、undefinedSymbol、循环引用等特殊类型的值。

2.它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object

3.如果对象中存在循环引用的情况无法正确处理。

2. 递归复制

通过递归函数手动复制对象的每个属性。这种方法可以处理更复杂的对象和特殊情况(如循环引用)。

js 复制代码
function deepClone(obj, hash = new WeakMap()) {  
  if (obj === null) return null; // null 的情况  
  if (obj instanceof Date) return new Date(obj); // 日期对象直接返回一个新的日期对象  
  if (obj instanceof RegExp) return new RegExp(obj); // 正则对象直接返回一个新的正则对象  
   //hash判断该属性是否被复制
  // 如果循环引用了就用 weakMap 来解决  
  if (hash.has(obj)) return hash.get(obj);  
  
  let allDesc = Object.getOwnPropertyDescriptors(obj);  
  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);  
  hash.set(obj, cloneObj);  
  
  for (let key of Reflect.ownKeys(obj)) {  
    if (typeof obj[key] === 'object' && obj[key] !== null) {  
      cloneObj[key] = deepClone(obj[key], hash);  
    } else {  
      cloneObj[key] = obj[key];  
    }  
  }  
  return cloneObj;  
}  
  
// 使用示例  
let original = { a: 1, b: { c: 2 } };  
original.b.d = original; // 创建一个循环引用  
let clone = deepClone(original);  
console.log(clone);  
相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio4 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一4 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
lingchen19066 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152876 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠6 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
翻滚丷大头鱼7 小时前
Java 集合Collection—List
java·开发语言
aramae7 小时前
C++ -- 模板
开发语言·c++·笔记·其他
胡耀超7 小时前
4、Python面向对象编程与模块化设计
开发语言·python·ai·大模型·conda·anaconda