深拷贝需根据对象复杂度选择方法：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 lodashconst 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))
是一个不错的选择。 如果你需要复制复杂的对象，包括函数和循环引用，那么递归深拷贝或使用第三方库是更好的选择。
以上就是js中如何克隆一个对象的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515591.html
微信扫一扫 
支付宝扫一扫 
