深拷贝需根据对象复杂度选择方法：1. 浅拷贝用object.assign或展开运算符，仅复制顶层属性，嵌套对象仍共享引用；2. json.parse(json.stringify(obj))可深拷贝但丢失函数、undefined等且不支持循环引用；3. 递归实现可处理复杂类型包括函数，但需手动解决循环引用；4. 第三方库如lodash的_.clonedeep()功能完整且性能优；5. 实验性api structuredclone()支持更多类型和循环引用，但兼容性有限，应按实际需求选择方案。
克隆一个对象在 JavaScript 中其实挺常见的，但要做到深拷贝，避免修改克隆对象影响到原对象，就得稍微费点心思。简单来说，浅拷贝只复制对象的引用，深拷贝则会创建一个全新的对象，内容和原对象一样。
解决方案
-
浅拷贝 (Shallow Copy):
-
Object.assign()
: 这是最简单的方法，但只能进行浅拷贝。
const originalObject = { a: 1, b: { c: 2 } }; const clonedObject = Object.assign({}, originalObject); clonedObject.a = 3; // 修改克隆对象的属性，不会影响原对象 clonedObject.b.c = 4; // 修改克隆对象中嵌套对象的属性，会影响原对象！ console.log(originalObject); // { a: 1, b: { c: 4 } } console.log(clonedObject); // { a: 3, b: { c: 4 } } -
展开运算符 (
...
)： 和
Object.assign()
类似，也是浅拷贝。
const originalObject = { a: 1, b: { c: 2 } }; const clonedObject = { ...originalObject }; clonedObject.a = 3; // 修改克隆对象的属性，不会影响原对象 clonedObject.b.c = 4; // 修改克隆对象中嵌套对象的属性，会影响原对象！ console.log(originalObject); // { a: 1, b: { c: 4 } } console.log(clonedObject); // { a: 3, b: { c: 4 } }
-
-
深拷贝 (Deep Copy):
-
JSON.parse(JSON.stringify(object))
: 这是最常用的深拷贝方法，但有一些限制。
const originalObject = { a: 1, b: { c: 2 }, d: function() { console.log('hello'); } }; const clonedObject = JSON.parse(JSON.stringify(originalObject)); clonedObject.a = 3; clonedObject.b.c = 4; console.log(originalObject); // { a: 1, b: { c: 2 }, d: [Function: d] } console.log(clonedObject); // { a: 3, b: { c: 4 }, d: null } 注意: 函数丢失了!注意： 这种方法无法复制函数、
undefined
、
Symbol
和循环引用的对象。 如果你的对象包含这些类型的数据，这个方法就不行了。
Date
对象会被转换成字符串。
-
递归实现深拷贝: 这是最灵活的方法，可以处理各种复杂情况。
function deepClone(obj) { if (typeof obj !== 'object' || obj === null) { return obj; // 如果不是对象或者为null，直接返回 } let clonedObj = Array.isArray(obj) ? [] : {}; // 根据原对象类型创建新对象 for (let key in obj) { if (obj.hasOwnProperty(key)) { // 确保只复制自身的属性 clonedObj[key] = deepClone(obj[key]); // 递归复制 } } return clonedObj; } const originalObject = { a: 1, b: { c: 2 }, d: function() { console.log('hello'); } }; const clonedObject = deepClone(originalObject); clonedObject.a = 3; clonedObject.b.c = 4; originalObject.d = function() { console.log('world'); } console.log(originalObject); // { a: 1, b: { c: 2 }, d: [Function (anonymous)] } console.log(clonedObject); // { a: 3, b: { c: 4 }, d: [Function: d] } // 函数也复制了!优点： 可以处理各种数据类型，包括函数、循环引用等。
缺点： 代码相对复杂，需要考虑各种边界情况。
-
使用第三方库: 例如 Lodash 的
_.cloneDeep()
方法。 这些库通常已经处理了各种复杂情况，使用起来更方便。
const _ = require('lodash'); // 确保安装了 lodash: npm install lodash const originalObject = { a: 1, b: { c: 2 }, d: function() { console.log('hello'); } }; const clonedObject = _.cloneDeep(originalObject); clonedObject.a = 3; clonedObject.b.c = 4; console.log(originalObject); console.log(clonedObject);优点： 简单易用，功能强大。
缺点： 需要引入额外的依赖。
-
什么时候应该使用浅拷贝，什么时候应该使用深拷贝？
如果你的对象只包含基本数据类型（数字、字符串、布尔值等），那么浅拷贝就足够了。 但是，如果对象包含嵌套的对象或数组，并且你希望修改克隆对象而不影响原对象，那么就需要使用深拷贝。
深拷贝的性能问题？
深拷贝通常比浅拷贝更耗费性能，特别是对于大型对象。
JSON.parse(JSON.stringify(object))
这种方法在性能上相对较差，因为它需要先将对象转换为字符串，然后再将字符串解析为对象。 递归深拷贝的性能取决于对象的复杂程度。 使用第三方库通常会提供更优化的深拷贝算法。
循环引用如何处理？
如果对象存在循环引用（例如，
obj.a = obj
），
JSON.parse(JSON.stringify(object))
会抛出错误。 递归深拷贝需要特殊处理循环引用，否则会导致无限递归。 一种常见的做法是使用一个
Map
来记录已经复制过的对象，如果遇到已经复制过的对象，则直接返回该对象的引用。
如何优化深拷贝的性能？
- 避免不必要的深拷贝： 只在必要的时候才进行深拷贝。
- 使用更高效的算法： 例如，使用迭代而不是递归。
- 利用缓存： 如果需要多次复制同一个对象，可以考虑将复制结果缓存起来。
深拷贝对函数的影响？
JSON.parse(JSON.stringify(object))
会将函数转换为
null
。 递归深拷贝和 Lodash 的
_.cloneDeep()
可以复制函数，但需要注意函数内部的
this
指向问题。
除了上述方法，还有其他深拷贝的实现方式吗？
是的，还有一些其他的深拷贝实现方式，例如：
-
使用
structuredClone()
(实验性 API): 这是一个新的 API，可以用来深拷贝对象。 它比
JSON.parse(JSON.stringify(object))
更快，并且可以处理更多的数据类型，包括循环引用。 但需要注意的是，这是一个实验性 API，可能在不同的浏览器中行为不一致。
const originalObject = { a: 1, b: { c: 2 }, d: function() { console.log('hello'); } }; const clonedObject = structuredClone(originalObject); clonedObject.a = 3; clonedObject.b.c = 4; console.log(originalObject); console.log(clonedObject);
总而言之，选择哪种深拷贝方法取决于你的具体需求。 如果你只需要复制简单的对象，并且不需要复制函数，那么
JSON.parse(JSON.stringify(object))
是一个不错的选择。 如果你需要复制复杂的对象，包括函数和循环引用，那么递归深拷贝或使用第三方库是更好的选择。
评论（已关闭）
评论已关闭