JavaScript 深拷贝与浅拷贝

浅拷贝 (Shallow Copy)

浅拷贝只复制对象的第一层属性，如果属性是引用类型（如对象、数组），则复制的是引用地址，新旧对象会共享这些引用类型的属性。

实现浅拷贝的方法

1. 展开运算符 (...)

   const obj = { a: 1, b: { c: 2 } };
   const shallowCopy = { ...obj };
   

2. Object.assign()

   const obj = { a: 1, b: { c: 2 } };
   const shallowCopy = Object.assign({}, obj);
   

3. 数组的 slice() 方法

   const arr = [1, 2, [3, 4]];
   const shallowCopy = arr.slice();
   

4. 数组的 concat() 方法

   const arr = [1, 2, [3, 4]];
   const shallowCopy = arr.concat();
   

深拷贝 (Deep Copy)

深拷贝会递归复制对象的所有层级，创建一个完全独立的新对象，新旧对象不会共享任何属性。

实现深拷贝的方法

1. JSON.parse(JSON.stringify())

   const obj = { a: 1, b: { c: 2 } };
   const deepCopy = JSON.parse(JSON.stringify(obj));
   

   • 缺点：无法处理函数、Symbol、undefined、循环引用等

2. 递归实现

   function deepClone(obj) {
     if (obj === null || typeof obj !== 'object') return obj;
     
     const clone = Array.isArray(obj) ? [] : {};
     
     for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
         clone[key] = deepClone(obj[key]);
       }
     }
     
     return clone;
   }
   

3. 使用第三方库

   • Lodash 的 _.cloneDeep()

     const _ = require('lodash');
     const deepCopy = _.cloneDeep(obj);
     

4. MessageChannel

   function structuralClone(obj) {
     return new Promise(resolve => {
       const { port1, port2 } = new MessageChannel();
       port2.onmessage = ev => resolve(ev.data);
       port1.postMessage(obj);
     });
   }
   

注意事项

1. 循环引用问题：自定义递归实现和JSON方法都无法处理循环引用
2. 特殊类型处理：Date、RegExp、Set、Map等需要特殊处理
3. 性能考虑：深拷贝比浅拷贝更消耗性能，尤其是对于大型对象

选择建议

• 如果对象没有嵌套或确定不需要嵌套复制，使用浅拷贝
• 如果需要完全独立的副本且对象结构复杂，使用深拷贝
• 考虑使用成熟的第三方库如Lodash来处理复杂的深拷贝场景