深拷贝与浅拷贝详解

前端深拷贝与浅拷贝详解及代码案例

在前端开发中，数据的拷贝是一个常见的需求。根据拷贝的层次不同，我们可以将数据拷贝分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。

浅拷贝（Shallow Copy）

浅拷贝是指创建一个新的对象，这个新对象有着原始对象属性值的一份精准拷贝。但是，如果属性值是引用类型（如对象或数组），则拷贝的是内存地址，而不是对象本身。因此，新旧对象会共享这些引用类型的属性。

浅拷贝的实现方式

1. 使用Object.assign()方法

   Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是，它进行的是浅拷贝。

   let obj1 = { name: 'Tom', age: 18, hobbies: ['reading', 'swimming'] };
   let obj2 = Object.assign({}, obj1);
   obj2.hobbies.push('coding');
   console.log(obj1.hobbies); // ['reading', 'swimming', 'coding']
   

   在这个例子中，obj2的hobbies数组是obj1的hobbies数组的引用，因此修改obj2.hobbies会影响到obj1.hobbies。

2. 使用扩展运算符（…）

   扩展运算符（…）可以将一个对象的属性解构到另一个对象中，这也是浅拷贝的一种方式。

   let obj1 = { name: 'Tom', age: 18, hobbies: ['reading', 'swimming'] };
   let obj2 = { ...obj1 };
   obj2.hobbies.push('coding');
   console.log(obj1.hobbies); // ['reading', 'swimming', 'coding']
   

   结果与Object.assign()相同，因为扩展运算符也是进行浅拷贝。

3. 数组的浅拷贝方法

   对于数组，可以使用slice()、concat()等方法进行浅拷贝。

   let arr1 = [1, 2, { name: 'Tom' }];
   let arr2 = arr1.slice();
   arr2[2].name = 'Jerry';
   console.log(arr1[2].name); // Jerry
   

   在这个例子中，arr2是arr1的浅拷贝，修改arr2[2].name会影响到arr1[2].name。

深拷贝（Deep Copy）

深拷贝会创建一个与原始对象完全独立的对象，包括嵌套的对象和数组。修改新对象不会影响到原始对象。

深拷贝的实现方式

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

   这是一种简单但有限制的深拷贝方法。它通过将对象转换为JSON字符串，然后再将字符串解析回对象来实现深拷贝。但是，这种方法不能处理函数、undefined、Symbol、BigInt等特殊值，也不能处理循环引用。

   let obj1 = { name: 'Tom', age: 18, hobbies: ['reading', 'swimming'] };
   let obj2 = JSON.parse(JSON.stringify(obj1));
   obj2.hobbies.push('coding');
   console.log(obj1.hobbies); // ['reading', 'swimming']
   

   在这个例子中，obj2是obj1的深拷贝，修改obj2.hobbies不会影响到obj1.hobbies。

2. 使用递归方法

   递归方法是实现深拷贝的一种更灵活的方式，可以处理各种复杂的数据结构和特殊值。

   function deepClone(obj, hash = new WeakMap()) {
     if (obj === null) return null;
     if (obj instanceof Date) return new Date(obj);
     if (obj instanceof RegExp) return new RegExp(obj);
     if (typeof obj !== 'object') return obj;
     if (hash.has(obj)) return hash.get(obj);
   
     let cloneObj = Array.isArray(obj) ? [] : {};
     hash.set(obj, cloneObj);
   
     for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
         cloneObj[key] = deepClone(obj[key], hash);
       }
     }
   
     return cloneObj;
   }
   
   let obj1 = { name: 'Tom', age: 18, hobbies: ['reading', 'swimming'], date: new Date() };
   let obj2 = deepClone(obj1);
   obj2.hobbies.push('coding');
   console.log(obj1.hobbies); // ['reading', 'swimming']
   

   在这个例子中，deepClone函数通过递归遍历对象的所有属性，并对每个属性进行深拷贝，从而实现了对复杂对象的深拷贝。