JS对象深拷贝方法详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《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);

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

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

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

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

深拷贝的性能问题？

深拷贝通常比浅拷贝更耗费性能，特别是对于大型对象。 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对象深拷贝方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！