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

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

什么是浅拷贝

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

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

常见浅拷贝方法包括：

• 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 等特殊类型）。

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情

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 等。

优势：原生支持、安全、无需引入库。
限制：不支持函数、不能跨 iframe/window 完全通用。

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

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

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

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

如何选择合适的拷贝方式

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

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

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

基本上就这些。理解深浅拷贝的本质，能避免很多隐蔽的 bug，尤其是在状态管理、表单编辑、撤销功能等场景中尤为重要。

以上就是J*aScript深拷贝与浅拷贝的全面解析的详细内容，更多请关注其它相关文章！

# javascript  # java  # js  # json  # 浏览器  # win  # 区别  # red  # 递归  # 运算符  # 适用于  # 命令行  # 如何用  # 如何实现  # 第一层  # 端到  # 这是  # 有何不同  # 雷州seo网站排名优化软件  # 服装行业公众号推广营销  # 社区推广的营销推广方式  # 紫金关键词排名  # 滁州营销推广服务公司  # 传统广告营销推广方式  # 招远外贸网站优化推广  # seo首页推广代理  # 电子书推广营销案例  # seo网站推广实例分析