一、引言：深浅拷贝的重要性与应用场景

在JavaScript开发中，数据拷贝是常见且重要的操作。无论是处理表单数据、状态管理还是模块间数据传递，正确实现数据的深浅拷贝都能有效避免数据污染和意外修改。浅拷贝仅复制对象的第一层属性，而深拷贝则递归复制所有嵌套对象，确保新旧对象完全独立。本文将系统梳理JavaScript中的深浅拷贝技术，包括官方方法、新旧技术对比及手写实现方案。

二、浅拷贝技术详解

1. 官方方法：Object.assign()

Object.assign()是ES6引入的浅拷贝方法，用于将一个或多个源对象的可枚举属性复制到目标对象。其语法为：

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

特点：

• 仅复制源对象的自身可枚举属性。
• 对嵌套对象执行引用复制，修改嵌套对象会影响原对象。
• 无法复制Symbol属性和不可枚举属性。

局限性：

• 无法处理深层嵌套结构。
• 原型链上的属性不会被复制。

2. 扩展运算符浅拷贝

ES6的扩展运算符...提供了更简洁的浅拷贝方式：

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

优势：

• 语法简洁，易于理解。
• 支持解构赋值与合并操作。

注意事项：

• 与Object.assign()相同，嵌套对象仍为引用。
• 不适用于数组拷贝（需结合其他方法）。

3. 数组浅拷贝方法

对于数组，以下方法可实现浅拷贝：

• slice()：

  const arr = [1, 2, { a: 3 }];
  const copy = arr.slice();

• concat()：

  const copy = [].concat(arr);

• Array.from()：

  const copy = Array.from(arr);

共同点：

• 仅复制数组元素的第一层。
• 嵌套对象仍保持引用关系。

三、深拷贝技术解析

1. 官方方法：结构化克隆（Structured Clone）

现代浏览器支持structuredClone()API，提供高效的深拷贝能力：

const original = { a: 1, b: { c: 2 } };
const copy = structuredClone(original);

优势：

• 支持循环引用（避免栈溢出）。
• 可复制Date、RegExp、Map、Set等特殊对象。
• 性能优于多数手写实现。

局限性：

• 无法复制函数、DOM节点等非序列化对象。
• 需注意浏览器兼容性（IE不支持）。

2. JSON序列化深拷贝

通过JSON.stringify()和JSON.parse()实现：

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

特点：

• 简单易用，兼容性好。
• 会忽略undefined、函数和Symbol属性。
• 无法处理循环引用（会抛出错误）。

适用场景：

• 纯数据对象的深拷贝。
• 需要兼容旧浏览器的环境。

3. 第三方库解决方案

Lodash的_.cloneDeep()提供了稳健的深拷贝实现：

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);

优势：

• 处理循环引用和特殊对象。
• 性能经过优化。
• 丰富的配置选项。

四、手写深拷贝实现

1. 基础递归实现

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  let clone;
  if (obj instanceof Date) {
    clone = new Date(obj);
  } else if (obj instanceof RegExp) {
    clone = new RegExp(obj);
  } else {
    clone = Array.isArray(obj) ? [] : {};
    hash.set(obj, clone);
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        clone[key] = deepClone(obj[key], hash);
      }
    }
  }
  return clone;
}

实现要点：

• 使用WeakMap处理循环引用。
• 区分Date、RegExp等特殊对象。
• 递归复制所有嵌套属性。

2. 性能优化版本

function optimizedDeepClone(obj) {
  return structuredClone(obj); // 实际项目中优先使用官方API
}

优化建议：

• 优先使用structuredClone()或Lodash。
• 手写实现仅用于学习或特殊环境。

五、技术对比与选型建议

方法	深拷贝	循环引用	特殊对象	性能	兼容性
Object.assign()	❌	❌	❌	高	ES6+
扩展运算符	❌	❌	❌	高	ES6+
structuredClone()	✅	✅	✅	极高	现代浏览器
JSON序列化	✅	❌	❌	中	全浏览器
Lodash _.cloneDeep	✅	✅	✅	高	全浏览器
手写递归	✅	✅	部分	低	全环境

选型建议：

1. 现代项目：优先使用structuredClone()。
2. 旧浏览器兼容：选择Lodash或JSON序列化。
3. 学习目的：实现手写版本理解原理。

六、常见问题与解决方案

1. 循环引用错误：

   • 使用WeakMap跟踪已复制对象。
   • 官方structuredClone()天然支持。

2. 函数属性丢失：

   • 深拷贝无法复制函数，需单独处理。

3. 性能瓶颈：

   • 大对象深拷贝考虑分块处理。
   • 避免在热路径中使用复杂深拷贝。

七、总结与展望

JavaScript深浅拷贝技术经历了从基础方法到官方API的演进。开发者应根据项目需求选择合适方案：简单场景使用浅拷贝，复杂数据结构优先选择structuredClone()或Lodash，学习阶段可尝试手写实现以加深理解。未来随着浏览器API的完善，深拷贝的实现将更加高效和可靠。