JavaScript 深拷贝完全指南：structuredClone、JSON.parse 与 Immer 的性能对比与实战

根据 Stack Overflow 2025 年开发者调查，超过 72% 的 JavaScript 开发者在日常工作中需要处理对象深拷贝（Deep Copy），而其中近一半仍然依赖 JSON.parse(JSON.stringify()) 这个"经典方案"。这个方案看似简洁，实则暗藏杀机——它会静默丢失 undefined、Function、Date、RegExp 等类型的数据，遇到循环引用直接抛出异常。2022 年，浏览器原生的 structuredClone API 正式进入所有主流浏览器，号称"终极深拷贝方案"。但事实真的如此吗？本文将从实际工程角度出发，对比分析五种主流深拷贝方案的原理、性能与适用场景，并引入不可变数据（Immutable Data）模式，帮助你在项目中做出最佳选择。

📌 **记住：**深拷贝的核心原则是「理解你的数据」——没有万能的深拷贝方案，只有最适合你数据结构的方案。

🔍 一、深拷贝的核心问题：为什么 JSON.parse 不够用

1.1 浅拷贝 vs 深拷贝：一字之差，天壤之别

在讨论深拷贝之前，先明确浅拷贝（Shallow Copy）与深拷贝（Deep Copy）的区别：

// 浅拷贝只复制第一层，嵌套对象仍然共享引用
const original = {
  name: '张三',
  address: { city: '北京', district: '朝阳' }
}

const shallow = { ...original }
shallow.name = '李四'
shallow.address.city = '上海'

console.log(original.name)         // '张三' ✅ 第一层独立
console.log(original.address.city) // '上海' ❌ 嵌套层被污染！

JavaScript 提供的浅拷贝方式包括：Object.assign()、展开运算符 ...、Array.prototype.slice()、Array.from() 等。但它们都无法处理嵌套对象。

1.2 JSON.parse(JSON.stringify()) 的致命缺陷

这个方案的工作原理是：先将对象序列化为 JSON 字符串，再反序列化回对象。看似简单，但 JSON 格式本身有严格的类型限制：

// ❌ JSON.parse(JSON.stringify()) 的各种翻车场景
const original = {
  name: '张三',
  age: undefined,           // 丢失：JSON 不支持 undefined
  greet: function() {},     // 丢失：JSON 不支持函数
  date: new Date(),         // 变成 ISO 字符串，不再是 Date 实例
  regex: /test/gi,          // 变成空对象 {}
  map: new Map([['key', 'value']]),  // 变成空对象 {}
  set: new Set([1, 2, 3]),          // 变成空对象 {}
  nan: NaN,                 // 变成 null
  infinity: Infinity,       // 变成 null
  symbol: Symbol('test'),   // 丢失：JSON 不支持 Symbol
}

const cloned = JSON.parse(JSON.stringify(original))
console.log(cloned.date instanceof Date)  // false ❌
console.log(cloned.map instanceof Map)    // false ❌
console.log(typeof cloned.greet)          // 'undefined' ❌
console.log(cloned.nan)                   // null ❌

更危险的是循环引用问题：

// ❌ 循环引用直接崩溃
const obj = { name: 'test' }
obj.self = obj  // 循环引用
JSON.parse(JSON.stringify(obj))
// TypeError: Converting circular structure to JSON

⚠️ 警告：JSON.parse(JSON.stringify()) 会静默丢失你无法在 JSON 中表示的数据类型。这种"静默失败"比直接报错更危险——你可能在生产环境中才发现数据丢失。

1.3 手写深拷贝的常见陷阱

很多开发者尝试手写深拷贝函数，但往往陷入更多陷阱：

// ❌ 常见的错误手写方案
function clone(obj) {
  if (obj === null || typeof obj !== 'object') return obj
  const result = Array.isArray(obj) ? [] : {}
  for (const key in obj) {
    result[key] = clone(obj[key])  // 问题1：没有处理循环引用
  }
  return result
}

// ✅ 改进版：处理循环引用 + Symbol 属性
function cloneDeep(obj, seen = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj
  if (seen.has(obj)) return seen.get(obj)  // 处理循环引用
  
  // 处理特殊内置类型
  if (obj instanceof Date) return new Date(obj.getTime())
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
  if (obj instanceof Map) {
    const map = new Map()
    seen.set(obj, map)
    obj.forEach((v, k) => map.set(cloneDeep(k, seen), cloneDeep(v, seen)))
    return map
  }
  if (obj instanceof Set) {
    const set = new Set()
    seen.set(obj, set)
    obj.forEach(v => set.add(cloneDeep(v, seen)))
    return set
  }
  
  const result = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj))
  seen.set(obj, result)
  
  for (const key of Reflect.ownKeys(obj)) {  // 包含 Symbol 属性
    result[key] = cloneDeep(obj[key], seen)
  }
  return result
}

这个改进版已经相当完善，但代码量已经不少，而且还需要处理 TypedArray、ArrayBuffer、Blob 等二进制类型。这就是为什么我们需要更成熟的方案。

🚀 二、structuredClone：浏览器原生深拷贝方案

2.1 基本用法与支持的数据类型

structuredClone 是 WHATWG 规范定义的浏览器原生深拷贝 API，基于结构化克隆算法（Structured Clone Algorithm）——这个算法其实早已在 postMessage（Web Workers 通信）中使用多年：

// ✅ structuredClone 基本用法
const original = {
  name: '张三',
  date: new Date('2026-01-01'),
  regex: /test/gi,
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  buffer: new ArrayBuffer(8),
  nested: { deep: { value: 42 } },
}

// 支持循环引用
original.self = original

const cloned = structuredClone(original)
console.log(cloned.date instanceof Date)   // true ✅
console.log(cloned.map instanceof Map)     // true ✅
console.log(cloned.set instanceof Set)     // true ✅
console.log(cloned.self === cloned)        // true ✅ 循环引用正确处理
console.log(cloned.self === original)      // false ✅ 与原对象独立

structuredClone 支持的数据类型一览：

• ✅ 基本类型：number、string、boolean、null、undefined、BigInt
• ✅ 复合类型：Object、Array、Map、Set
• ✅ 二进制数据：ArrayBuffer、TypedArray、DataView、Blob、File
• ✅ 特殊类型：Date、RegExp、Error（部分子类）
• ✅ 循环引用：自动处理
• ❌ 不支持：Function、DOM 节点、Symbol、WeakMap、WeakSet

2.2 Transferable Objects：零拷贝转移

structuredClone 还支持一个独特功能——可转移对象（Transferable Objects）。这在处理大型二进制数据时非常有用：

// ✅ 使用 transfer 选项实现零拷贝转移
const buffer = new ArrayBuffer(1024 * 1024)  // 1MB 数据
const view = new Uint8Array(buffer)
view[0] = 42

// 转移所有权，而不是复制
const cloned = structuredClone(buffer, { transfer: [buffer] })

console.log(cloned.byteLength)   // 1048576 ✅
console.log(buffer.byteLength)   // 0 ❌ 原 buffer 已被转移，不可再使用
console.log(new Uint8Array(cloned)[0])  // 42 ✅

💡 **提示：**在 Web Workers 之间传递大型 ArrayBuffer 时，使用 transfer 可以避免内存复制，性能提升可达 10-100 倍。这对于音视频处理、图像处理等场景至关重要。

2.3 structuredClone 的局限性

// ❌ structuredClone 不支持的类型
const obj = {
  fn: () => 'hello',        // ❌ DOMException: Failed to execute 'structuredClone'
  symbol: Symbol('test'),   // ❌ 会被静默忽略（不是报错）
  weakMap: new WeakMap(),   // ❌ DOMException
  domNode: document.body,   // ❌ DOMException
}

// ❌ 不支持克隆原型链上的方法
class Person {
  constructor(name) { this.name = name }
  greet() { return `Hello, ${this.name}` }
}
const p = new Person('张三')
const cloned = structuredClone(p)
console.log(cloned instanceof Person)  // false ❌ 变成了普通 Object
console.log(cloned.greet)              // undefined ❌ 方法丢失
console.log(cloned.name)               // '张三' ✅ 数据属性保留

2.4 浏览器兼容性与 Polyfill

structuredClone 的浏览器支持情况（截至 2026 年 5 月）：

如果需要兼容更旧的环境，可以使用 polyfill：

// structuredClone polyfill（基于 MessageChannel）
if (typeof globalThis.structuredClone !== 'function') {
  globalThis.structuredClone = function structuredClone(value) {
    const { port1, port2 } = new MessageChannel()
    return new Promise((resolve) => {
      port1.onmessage = ({ data }) => resolve(data)
      port2.postMessage(value)
    })
  }
}

⚠️ **警告：**上面的 polyfill 是异步的（返回 Promise），而原生 structuredClone 是同步的。如果需要同步 polyfill，可以使用 @ungap/structured-clone 等第三方库。

📊 三、五种深拷贝方案性能对比

3.1 测试方案设计

我们在 Chrome 125 环境下，对比五种主流深拷贝方案在不同数据规模下的性能表现。测试数据为嵌套 3 层的对象，包含 Object、Array、Date、Map、Set 等类型。

3.2 性能测试代码

// 完整的深拷贝性能测试代码
function benchmark(name, fn, data, iterations = 1000) {
  // 预热
  for (let i = 0; i < 10; i++) fn(data)
  
  const start = performance.now()
  for (let i = 0; i < iterations; i++) {
    fn(data)
  }
  const end = performance.now()
  const avg = ((end - start) / iterations).toFixed(3)
  console.log(`${name.padEnd(25)} ${avg}ms/次`)
}

// 生成测试数据
function generateTestData(size) {
  const obj = { _meta: { created: new Date(), version: 1 } }
  for (let i = 0; i < size; i++) {
    obj[`key_${i}`] = {
      value: Math.random(),
      tags: new Set(['a', 'b', 'c']),
      metadata: new Map([['source', 'test']]),
      nested: { a: 1, b: 'hello', c: [1, 2, 3] }
    }
  }
  return obj
}

const data = generateTestData(1000)

benchmark('JSON.parse/stringify', d => JSON.parse(JSON.stringify(d)), data)
benchmark('structuredClone', d => structuredClone(d), data)
benchmark('lodash.cloneDeep', d => _.cloneDeep(d), data)
benchmark('手写递归', d => cloneDeep(d), data)
benchmark('Immer produce', d => produce(d, draft => draft), data)

3.3 结果分析与选择建议

⚡ **关键结论：**JSON.parse/stringify 是最快的方案，但功能最弱；structuredClone 在功能和性能之间取得了最佳平衡；lodash.cloneDeep 功能最全但性能最差。对于 90% 的场景，structuredClone 是最佳默认选择。

选择决策树：

• ✅ 简单数据（纯 JSON 可序列化）→ JSON.parse(JSON.stringify())
• ✅ 通用场景（需要保留 Date/Map/Set）→ structuredClone
• ✅ 需要保留原型链和方法 → 手写递归或 lodash.cloneDeep
• ✅ React/Vue 状态管理 → Immer produce
• ✅ 大型二进制数据在 Worker 间传递 → structuredClone + transfer

💡 四、不可变数据：超越深拷贝的现代方案

4.1 深拷贝的真正问题：性能浪费

在 React/Vue 等现代前端框架中，状态管理的核心原则是不可变性（Immutability）。但深拷贝整个状态树来更新一个字段，就像为了改一个错别字而复印整本书：

// ❌ 深拷贝整个状态来更新一个字段
const [state, setState] = useState({
  user: { name: '张三', address: { city: '北京', street: '长安街' } },
  cart: { items: [{ id: 1, name: 'iPhone', qty: 1 }] },
  settings: { theme: 'dark', lang: 'zh-CN' }
})

// 只想改一个城市名，却要深拷贝整个状态树
setState(prev => {
  const next = structuredClone(prev)  // 浪费：settings、cart 都被拷贝了
  next.user.address.city = '上海'
  return next
})

4.2 Immer 的工作原理：Proxy 与结构共享

Immer 使用 ES6 Proxy 拦截对象操作，实现"写时复制"（Copy-on-Write）——只有被修改的路径才会创建新副本，其余部分仍然引用原对象：

import { produce } from 'immer'

const initialState = {
  user: { name: '张三', address: { city: '北京' } },
  cart: { items: [{ id: 1, qty: 1 }] },
  settings: { theme: 'dark' }
}

// ✅ Immer：只复制被修改的路径
const nextState = produce(initialState, draft => {
  draft.user.address.city = '上海'  // 直接修改 draft
})

// 验证结构共享
console.log(initialState.settings === nextState.settings)  // true ✅ 未修改部分共享
console.log(initialState.cart === nextState.cart)          // true ✅ 未修改部分共享
console.log(initialState.user === nextState.user)          // false ❌ 被修改路径是新副本
console.log(initialState.user.address === nextState.user.address)  // false ❌

Immer 的性能优势在于结构共享：一个包含 1000 个属性的状态树，修改 1 个属性后，只有被修改的那条路径（通常 2-3 个对象）会创建新副本，其余 997 个对象仍然共享引用。

4.3 实战：复杂状态管理

// 实战：电商购物车状态管理
import { produce } from 'immer'

const initialState = {
  items: [
    { id: 1, name: 'iPhone 15', price: 7999, quantity: 1, options: { color: '黑' } },
    { id: 2, name: 'AirPods Pro', price: 1899, quantity: 2, options: { color: '白' } },
  ],
  coupon: { code: 'VIP2026', discount: 0.9 },
  user: { name: '张三', level: 'VIP' }
}

// ✅ 更新商品数量
const updatedQty = produce(initialState, draft => {
  const item = draft.items.find(i => i.id === 1)
  item.quantity = 3
})

// ✅ 添加新商品
const addedItem = produce(initialState, draft => {
  draft.items.push({
    id: 3, name: 'MacBook Pro', price: 14999, quantity: 1,
    options: { color: '银' }
  })
})

// ✅ 删除商品
const removedItem = produce(initialState, draft => {
  const index = draft.items.findIndex(i => i.id === 2)
  draft.items.splice(index, 1)
})

// ✅ 嵌套更新
const updatedOptions = produce(initialState, draft => {
  draft.items[0].options.color = '白'
  draft.coupon.discount = 0.8
})

// 验证原对象未被修改
console.log(initialState.items[0].quantity)     // 1 ✅
console.log(initialState.items[0].options.color) // '黑' ✅
console.log(updatedQty.items[0].quantity)        // 3 ✅

💡 **提示：**Immer 的 produce 函数返回的是一个新的不可变对象。如果你在 produce 的回调中没有修改任何东西，它会返回原对象（引用相等），这可以用来做性能优化。

⚠️ 五、最佳实践与避坑指南

5.1 选择合适的方案

• ✅ 简单配置对象、纯数据传输 → JSON.parse(JSON.stringify())
• ✅ 包含 Date/Map/Set/循环引用 → structuredClone
• ✅ 需要保留类实例的原型链和方法 → 手写递归或 lodash.cloneDeep
• ✅ React/Vue 状态管理、频繁更新 → Immer produce
• ✅ Web Worker 间传递大型二进制数据 → structuredClone + transfer
• ❌ 不要在循环中频繁深拷贝大对象
• ❌ 不要用 Object.assign() 或展开运算符做深拷贝（只拷贝一层）
• ❌ 不要在性能敏感路径中使用 lodash.cloneDeep（性能最差）

5.2 常见坑点

坑点 1：JSON.parse 的 Date 转换陷阱

// ❌ Date 被转换为字符串
const data = { createdAt: new Date('2026-01-01') }
const cloned = JSON.parse(JSON.stringify(data))
console.log(cloned.createdAt)              // "2026-01-01T00:00:00.000Z"（字符串）
console.log(cloned.createdAt instanceof Date)  // false ❌

// ✅ 需要手动恢复
function jsonParseWithDates(json) {
  return JSON.parse(json, (key, value) => {
    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
      return new Date(value)
    }
    return value
  })
}

坑点 2：structuredClone 不保留原型链

class User {
  constructor(name) { this.name = name }
  greet() { return `Hello, ${this.name}` }
}

const user = new User('张三')
const cloned = structuredClone(user)

console.log(cloned instanceof User)  // false ❌
console.log(cloned.greet)            // undefined ❌

// ✅ 解决方案：手动恢复原型
function cloneWithPrototype(obj) {
  const cloned = structuredClone(obj)
  Object.setPrototypeOf(cloned, Object.getPrototypeOf(obj))
  return cloned
}

坑点 3：Immer 的副作用陷阱

import { produce } from 'immer'

// ❌ 在 produce 中使用副作用
const state = { items: [1, 2, 3] }
const result = produce(state, draft => {
  draft.items.push(Math.random())  // 每次 produce 结果都不同
  // 不要在 produce 中调用 API、修改外部变量等
})

// ❌ 在 produce 中使用非纯数据
const state2 = { callback: () => console.log('hi') }
const result2 = produce(state2, draft => {
  // Immer 不会代理函数，回调函数仍然是原引用
  console.log(draft.callback === state2.callback)  // true
})

⚠️ **警告：**Immer 的 produce 回调应该是纯函数——不要在其中执行异步操作、修改外部变量或产生副作用。否则会导致不可预测的行为。

🎯 总结

在 2026 年的现代 JavaScript 开发中，深拷贝方案的选择应该基于具体场景，而不是一刀切：

⚡ **关键结论：**对于大多数项目，structuredClone 是 2026 年的最佳默认选择——它是浏览器原生 API、无需引入第三方库、功能覆盖 90% 的场景、性能表现优秀。只有在需要保留原型链方法或进行复杂状态管理时，才需要考虑其他方案。

相关工具推荐：

• 🔧 JSON 格式化工具 — 在线 JSON 格式化与校验
• 🔧 JSON 对比工具 — 对比深拷贝前后的 JSON 差异
• 🔧 JavaScript 代码运行 — 在线测试深拷贝代码
• 📦 Immer — 不可变数据库
• 📦 lodash.cloneDeep — 功能最全的深拷贝方案