js中如何克隆一个对象

深拷贝需根据对象复杂度选择方法：1. 浅拷贝用object.assign或展开运算符，仅复制顶层属性，嵌套对象仍共享引用；2. json.parse(json.stringify(obj))可深拷贝但丢失函数、undefined等且不支持循环引用；3. 递归实现可处理复杂类型包括函数，但需手动解决循环引用；4. 第三方库如lodash的_.clonedeep()功能完整且性能优；5. 实验性api structuredclone()支持更多类型和循环引用，但兼容性有限，应按实际需求选择方案。

克隆一个对象在 JavaScript 中其实挺常见的，但要做到深拷贝，避免修改克隆对象影响到原对象，就得稍微费点心思。简单来说，浅拷贝只复制对象的引用，深拷贝则会创建一个全新的对象，内容和原对象一样。

解决方案

1. 浅拷贝 (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 } }

     登录后复制

2. 深拷贝 (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);

     登录后复制

     优点： 简单易用，功能强大。

     缺点： 需要引入额外的依赖。

     

     FineVoice语音克隆

     免费在线语音克隆，1 分钟克隆你的声音，保留口音和所有细微差别。

     61

     查看详情

什么时候应该使用浅拷贝，什么时候应该使用深拷贝？

如果你的对象只包含基本数据类型（数字、字符串、布尔值等），那么浅拷贝就足够了。 但是，如果对象包含嵌套的对象或数组，并且你希望修改克隆对象而不影响原对象，那么就需要使用深拷贝。

深拷贝的性能问题？

深拷贝通常比浅拷贝更耗费性能，特别是对于大型对象。

JSON.parse(JSON.stringify(object))

循环引用如何处理？

如果对象存在循环引用（例如，

obj.a = obj

JSON.parse(JSON.stringify(object))

Map

如何优化深拷贝的性能？

• 避免不必要的深拷贝： 只在必要的时候才进行深拷贝。
• 使用更高效的算法： 例如，使用迭代而不是递归。
• 利用缓存： 如果需要多次复制同一个对象，可以考虑将复制结果缓存起来。

深拷贝对函数的影响？

JSON.parse(JSON.stringify(object))

null

_.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中如何克隆一个对象的详细内容，更多请关注php中文网其它相关文章！