JavaScript 中浅拷贝和深拷贝怎么实现-js教程-PHP中文网

javascript 中实现浅拷贝可以使用 object.assign()、展开运算符 {...obj} 或 array.prototype.slice()，而深拷贝则需要通过递归遍历或使用 json.parse(json.stringify()) 来处理嵌套对象。浅拷贝仅复制第一层属性，引用类型仍共享内存；深拷贝则完全独立创建新对象，修改不会影响原数据。

JavaScript 中浅拷贝和深拷贝怎么实现

如何实现浅拷贝

使用展开运算符 {...obj} 是最简洁的浅拷贝方式，它会将源对象的所有可枚举属性复制到新对象中，但嵌套对象依然保持引用关系。

JavaScript 中浅拷贝和深拷贝怎么实现

const original = { a: 1, b: { c: 2 } }; const shallowCopy = { ...original }; console.log(shallowCopy.a === original.a); // true console.log(shallowCopy.b === original.b); // true shallowCopy.b.c = 99; console.log(original.b.c); // 99

上述代码展示了展开运算符的行为：基本类型 a 被正确复制，而嵌套对象 b 仍然指向同一内存地址，因此修改 shallowCopy.b.c 会影响原始对象。

如何实现深拷贝

对于简单数据结构，可以使用 JSON.parse(JSON.stringify(obj)) 进行深拷贝，它能将对象序列化为字符串后再解析为新对象，从而切断所有引用。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

JavaScript 中浅拷贝和深拷贝怎么实现

const original = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(original)); console.log(deepCopy.a === original.a); // true console.log(deepCopy.b === original.b); // false deepCopy.b.c = 99; console.log(original.b.c); // 2

该方法的局限性在于无法处理函数、undefined、Symbol 以及循环引用，但在大多数纯数据场景下非常有效。若需更复杂的深拷贝，应编写递归函数逐个属性复制。

深拷贝中如何处理循环引用

当对象存在循环引用时，JSON.stringify 会抛出错误，此时必须使用基于 WeakMap 的递归深拷贝来避免无限递归。

function deepClone(obj, map = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj; if (map.has(obj)) return map.get(obj); const clone = Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key], map); } } return clone; } const a = { x: 1 }; a.self = a; const cloned = deepClone(a); console.log(cloned.self === cloned); // true console.log(cloned.self === a); // false

此实现通过 WeakMap 记录已克隆的对象，遇到重复引用时直接返回缓存副本，确保结构完整且无循环依赖问题。