JavaScript深拷贝与浅拷贝的全面解析

深拷贝和浅拷贝的核心区别在于是否递归复制引用类型。浅拷贝仅复制对象第一层属性，引用类型共享内存，修改新对象会影响原对象，常见方法有Object.assign、扩展运算符、slice等；深拷贝则完全复制所有层级，新旧对象独立，互不影响。实现方式包括JSON.parse(JSON.stringify())（适用于纯数据）、手动递归（支持循环引用和内置对象）、structuredClone()（现代浏览器原生支持）及Lodash的cloneDeep()。选择时需权衡兼容性、性能与使用场景，避免对DOM节点或window对象进行深拷贝。

JavaScript中的深拷贝和浅拷贝是处理对象复制时必须理解的核心概念。很多人在操作对象时，以为赋值就是“复制”，结果修改新对象时原对象也被改变了——这就是浅拷贝带来的副作用。下面从原理到实现，全面解析两者的区别与使用方式。

什么是浅拷贝

浅拷贝是指创建一个新对象，这个新对象拥有原对象属性的副本，但属性值如果是引用类型（如对象、数组），则只复制了指向该对象的引用，而不是其本身。

换句话说：基本数据类型会被复制，而引用类型只是“共享”同一个内存地址。

常见浅拷贝方法包括：

立即学习“Java免费学习笔记（深入）”；

• Object.assign()：只能实现一级属性的浅拷贝
• 扩展运算符 {...obj}：语法简洁，效果同 Object.assign
• Array.prototype.slice() 或 concat()：用于数组浅拷贝

示例：

const original = { name: 'Alice', info: { age: 25 } };
const shallow = { ...original };

shallow.info.age = 30;
console.log(original.info.age); // 输出 30 —— 原对象被影响

什么是深拷贝

深拷贝会递归地复制对象的所有层级，包括嵌套的对象和数组，确保新对象与原对象完全独立，互不影响。

深拷贝的关键在于：每一个引用类型都重新创建一份副本，断开与原数据的联系。

实现深拷贝的方法有多种，各有优劣：

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

这是最简单的深拷贝方法，适用于纯数据对象（不含函数、undefined、Symbol、Date 等特殊类型）。

PictoGraphic

AI驱动的矢量插图库和插图生成平台

下载

const deep = JSON.parse(JSON.stringify(original));

• 无法处理函数、undefined、Symbol
• Date 类型会被转为字符串
• 循环引用会报错
• RegExp、Error 对象会丢失信息

2. 手动递归实现

通过判断数据类型，逐层复制，是最可控的方式。

function deepClone(obj, seen = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  
  if (seen.has(obj)) return seen.get(obj); // 防止循环引用
  
  let clone;
  if (obj instanceof Date) {
    clone = new Date(obj);
  } else if (obj instanceof RegExp) {
    clone = new RegExp(obj);
  } else if (Array.isArray(obj)) {
    clone = obj.map(item => deepClone(item, seen));
  } else {
    clone = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        clone[key] = deepClone(obj[key], seen);
      }
    }
  }
  
  seen.set(obj, clone);
  return clone;
}

这种方式支持循环引用，兼容大部分内置对象，适合需要精确控制的场景。

3. 使用结构化克隆算法（浏览器API）

现代浏览器提供 structuredClone() 方法，可安全深拷贝支持的数据类型。

const cloned = structuredClone(original);

支持：对象、数组、Date、RegExp、Map、Set、Blob、FileList、ImageData 等。

4. 使用第三方库（如 Lodash）

Lodash 提供 _.cloneDeep() 方法，功能强大且稳定。

const _ = require('lodash');
const deep = _.cloneDeep(original);

适合复杂项目，处理边界情况更完善。

如何选择合适的拷贝方式

根据实际需求权衡性能与兼容性：

• 如果对象是纯数据（如配置、JSON响应），用 JSON.parse + stringify 最快
• 需要兼容 Date、RegExp 或存在嵌套结构，推荐 structuredClone（现代环境）
• 需支持函数或特殊类型，使用 手动递归 或 Lodash
• 仅复制第一层，可用 扩展运算符 或 Object.assign

特别提醒：不要对 DOM 节点、window 对象等使用深拷贝，会导致意外行为或错误。