深拷贝和浅拷贝的核心区别在于是否递归复制引用类型。浅拷贝仅复制对象第一层属性,引用类型共享内存,修改新对象会影响原对象,常见方法有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 等特殊类型)。
const deep = JSON.parse(JSON.stringify(original));
缺点:
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,尤其是在状态管理、表单编辑、撤销功能等场景中尤为重要。