JavaScript深拷贝与浅拷贝的区别及实现方法详解

在JavaScript开发中，数据拷贝是处理对象和数组时的常见需求。由于基本类型（如number、string）与引用类型（如object、array）的存储机制不同，直接赋值操作可能导致意外的数据共享问题。本文ZHANID工具网将系统解析深拷贝与浅拷贝的核心区别、实现方法及性能对比，帮助开发者精准选择拷贝策略。

一、基础概念：数据类型与内存模型

1. JavaScript数据类型分类

• 基本类型（Primitive Types）：
  number、string、boolean、null、undefined、symbol、bigint
  存储于栈内存，直接按值访问。

• 引用类型（Reference Types）：
  object、array、function、date、regexp等
  存储于堆内存，栈中仅保存指向堆的地址指针。

2. 直接赋值的本质

const original = { a: 1, b: { c: 2 } };
const copy = original; // 直接赋值
copy.a = 10;
console.log(original.a); // 输出10（原始对象被修改）

原理：copy仅复制了original的指针，两者指向同一堆内存地址，形成"共享引用"。

二、浅拷贝（Shallow Copy）详解

1. 定义与特性

浅拷贝仅复制对象的第一层属性，若属性值为引用类型，则复制其指针而非实际数据。
核心特征：

• 修改拷贝对象的基本类型属性不影响原始对象

• 修改拷贝对象的引用类型属性会同步影响原始对象

2. 常见实现方法

方法1：展开运算符（Spread Operator）

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

shallowCopy.a = 10;   // 不影响original.a
shallowCopy.b.c = 20;  // 同步修改original.b.c

方法2：Object.assign()

const shallowCopy = Object.assign({}, original);
// 行为与展开运算符一致

方法3：数组专属方法

// 数组浅拷贝
const arrOriginal = [1, [2, 3]];
const arrShallowCopy = [...arrOriginal]; // 或 arrOriginal.slice()

arrShallowCopy[0] = 10;   // 不影响原数组
arrShallowCopy[1][0] = 20;  // 同步修改原数组

方法4：Array.from()（仅数组）

const arrShallowCopy = Array.from(arrOriginal);

3. 性能对比（基于100万次操作测试）

结论：展开运算符在大多数场景下性能最优，Array.from()适合需要显式转换的场景。

三、深拷贝（Deep Copy）详解

1. 定义与特性

深拷贝会递归复制对象的所有层级属性，生成完全独立的新对象。
核心特征：

• 修改拷贝对象的任何属性均不影响原始对象

• 支持循环引用（需特殊处理）

2. 常见实现方法

方法1：JSON.parse(JSON.stringify())

const original = { a: 1, b: { c: 2 }, d: new Date() };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 20; // 完全不影响original

局限性：

• 忽略undefined、function、symbol等特殊类型

• 无法处理循环引用（会抛出错误）

• 日期对象会被转为字符串（如"2024-01-01T00:00:00.000Z"）

方法2：递归实现（基础版）

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

改进点：

• 添加Symbol属性支持

• 处理Map/Set等特殊对象

• 优化循环引用检测

方法3：使用structuredClone()（现代浏览器）

const original = { a: 1, b: new Set([2, 3]) };
const deepCopy = structuredClone(original); // 支持Date/RegExp/Map/Set等

deepCopy.b.add(4); // 完全独立

兼容性：Chrome 98+、Firefox 94+、Edge 98+、Safari 15.4+

方法4：第三方库（Lodash）

import _ from 'lodash';
const deepCopy = _.cloneDeep(original);

优势：

• 全面支持所有JavaScript类型

• 自动处理循环引用

• 经过大规模生产环境验证

3. 性能对比（基于复杂对象测试）

结论：

• 简单场景优先使用structuredClone

• 遗留项目可用JSON方法或递归实现

• 企业级应用推荐Lodash

四、特殊场景处理

1. 循环引用问题

const obj = {};
obj.self = obj; // 循环引用

// 错误实现（栈溢出）
function badClone(o) {
 return { ...o, self: badClone(o.self) }; // 无限递归
}

// 正确实现（使用WeakMap记录已拷贝对象）
function safeDeepClone(obj, hash = new WeakMap()) {
 if (obj === null || typeof obj !== 'object') return obj;
 
 if (hash.has(obj)) return hash.get(obj); // 返回已拷贝对象
 
 const clone = Array.isArray(obj) ? [] : {};
 hash.set(obj, clone); // 记录拷贝关系
 
 for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
   clone[key] = safeDeepClone(obj[key], hash);
  }
 }
 
 return clone;
}

2. 不可枚举属性处理

const obj = {};
Object.defineProperty(obj, 'hidden', {
 value: 'secret',
 enumerable: false
});

// 展开运算符无法拷贝不可枚举属性
const copy1 = { ...obj }; // { }

// 使用Object.getOwnPropertyDescriptors
function cloneWithDescriptors(obj) {
 const clone = Object.create(Object.getPrototypeOf(obj));
 Object.defineProperties(clone, Object.getOwnPropertyDescriptors(obj));
 return clone;
}

const copy2 = cloneWithDescriptors(obj); // { hidden: 'secret' }

3. 原型链保留

function Person(name) {
 this.name = name;
}
Person.prototype.greet = function() { return `Hello, ${this.name}`; };

const alice = new Person('Alice');

// 展开运算符会丢失原型方法
const copy1 = { ...alice }; // { name: 'Alice' }

// 使用Object.create保留原型
function cloneWithPrototype(obj) {
 const clone = Object.create(Object.getPrototypeOf(obj));
 Object.assign(clone, obj); // 浅拷贝属性
 return clone;
}

const copy2 = cloneWithPrototype(alice); // 保留greet方法

五、最佳实践指南

1. 选择策略矩阵

2. 性能优化技巧

• 避免深拷贝大型对象：考虑使用不可变数据模式（如Immer.js）

• 缓存拷贝结果：对频繁使用的对象可预先拷贝

• 按需拷贝：仅拷贝需要独立的部分（如{ ...obj, nested: deepClone(obj.nested) }）

3. 调试技巧

// 检测对象是否独立
function isDeepClone(original, copy) {
 if (original === copy) return false; // 同一引用
 
 const keys = Object.keys(original);
 for (const key of keys) {
  if (typeof original[key] === 'object' && original[key] !== null) {
   if (!isDeepClone(original[key], copy[key])) return false;
  } else if (original[key] !== copy[key]) {
   return false;
  }
 }
 return true;
}

const obj = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(obj);
console.log(isDeepClone(obj, copy)); // true

六、常见误区澄清

1. 浅拷贝=性能更好？
   不一定。对于小型对象或无嵌套结构，深拷贝开销可忽略。需根据实际数据结构选择。

2. Object.assign()可以深拷贝？
   错误。它仅执行第一层的浅拷贝，与展开运算符行为一致。

3. 深拷贝能解决所有问题？
   对于函数、DOM节点等特殊对象，任何拷贝方式都无法完全复制其行为，需重新初始化。

4. 为什么structuredClone不支持Error对象？
   出于安全考虑，错误对象的堆栈信息可能包含敏感路径信息。

结语

深拷贝与浅拷贝的选择本质是对开发效率与运行性能的权衡。在React/Vue等框架中，不可变数据模式正逐渐替代手动拷贝；但在传统DOM操作或Node.js后端开发中，精准控制数据拷贝仍是必备技能。通过理解本文提供的12种实现方法及其适用场景，开发者可构建出既健壮又高效的数据处理逻辑。根据2024年JavaScript生态调查，83%的中大型项目仍需要手动实现拷贝逻辑，掌握这些技术仍是前端工程师的核心竞争力之一。