JavaScript中的深拷贝与浅拷贝

目录

引言：

一、浅拷贝（Shallow Copy）

二、深拷贝（Deep Copy）

实现深拷贝的方法：

     1.使用JSON.parse(JSON.stringify(obj))

     2.使用递归实现深拷贝

三、总结

引言：

        在JavaScript中，当我们需要复制一个对象时，可能会遇到深拷贝和浅拷贝的问题。这两种拷贝方式在处理对象及其子对象时有着显著的区别。本文将详细介绍深拷贝和浅拷贝的概念、区别，以及实现深拷贝的几种方法。

一、浅拷贝（Shallow Copy）

        浅拷贝是创建一个新对象，并将原对象的属性值复制到新对象。但是，这里的“复制”是浅层次的。如果原对象的属性值是一个引用类型（如对象、数组等），那么复制的是这个引用类型的地址，而不是真正的对象。因此，新对象和原对象会共享这个引用类型的值。

代码示例：

let obj1 = {    
  a: 1,  // a是一个基本类型（number）  
  b: { c: 2 }  // b是一个引用类型（对象），它的c属性也是一个基本类型（number）  
};  
  
let obj2 = Object.assign({}, obj1); // 浅拷贝

obj2.a = 3; // 修改obj2的a属性，由于a是基本类型，所以它在obj2中有了新的值，不影响obj1  
console.log(obj1.a); // 输出1，因为obj1的a属性没有被修改  
  
obj2.b.c = 4; // 修改obj2的b对象的c属性，由于b是引用类型，obj2.b和obj1.b指向同一个对象，所以obj1的b对象的c属性也被修改了  
console.log(obj1.b.c); // 输出4，因为obj1和obj2的b属性指向同一个对象，所以修改是共享的

        当您在JavaScript中执行浅拷贝时，您实际上是在复制对象的顶层属性到新的对象。但是，如果这些属性是引用类型（如对象或数组），那么您复制的仅仅是这些引用类型的引用（即它们的内存地址），而不是实际的对象。

二、深拷贝（Deep Copy）

        深拷贝是创建一个新对象，并将原对象的属性值及其子对象的属性值都复制到新对象。深拷贝会递归地复制所有级别的属性，直到所有的属性都是基本类型为止。这样，新对象和原对象是完全独立的，互不影响。

实现深拷贝的方法：

        1.使用JSON.parse(JSON.stringify(obj))

        这种方法简单方便，但有其局限性。它不能正确处理函数、循环引用、undefined、Symbol和某些Date对象等。

代码示例：

let obj1 = {  
  a: 1,  
  b: { c: 2 }  
};  
  
let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝  
  
obj2.a = 3; // 修改obj2的a属性，不影响obj1  
console.log(obj1.a); // 输出1  
  
obj2.b.c = 4; // 修改obj2的b对象的c属性，不影响obj1  
console.log(obj1.b.c); // 输出2

        2.使用递归实现深拷贝

        递归方法可以实现更精确的深拷贝，可以处理函数、循环引用等复杂情况。但需要注意递归终止条件和循环引用的处理。

代码示例：

function deepCopy(obj, hash = new WeakMap()) {  
  if (typeof obj !== 'object' || obj === null) {  
    return obj;  
  }  
    
  if (hash.has(obj)) {  
    return hash.get(obj);  
  }  
    
  let copy = Array.isArray(obj) ? [] : {};  
  hash.set(obj, copy);  
    
  for (let key in obj) {  
    if (obj.hasOwnProperty(key)) {  
      copy[key] = deepCopy(obj[key], hash);  
    }  
  }  
    
  return copy;  
}  
  
// 使用示例  
let obj1 = {  
  a: 1,  
  b: { c: 2 }  
};  
  
let obj2 = deepCopy(obj1); // 深拷贝  
  
// 修改操作...

三、总结

        深拷贝和浅拷贝在处理JavaScript对象时有着显著的区别。浅拷贝只复制对象的顶层属性，如果属性值是引用类型，则复制的是引用地址；而深拷贝会递归地复制对象的所有属性，包括子对象，使得新对象和原对象是完全独立的。在实际开发中，需要根据具体的需求来选择使用哪种拷贝方式，并注意各种拷贝方法的限制和优缺点。