JS中【浅克隆】和【深克隆】方法解读

在JavaScript中，“克隆”指的是创建一个对象或数组的副本。克隆可以分为浅克隆和深克隆两种方式。了解这两种克隆的差异对编程非常重要。

浅克隆（Shallow Clone）

浅克隆会复制对象或数组的第一层属性，但对于嵌套的对象或数组，它们只复制引用，而不是实际的数据。

浅克隆的方法：

1. Object.assign():

   const obj = { a: 1, b: { c: 2 } };
   const clone = Object.assign({}, obj);
   clone.b.c = 3;
   console.log(obj.b.c); // 输出 3
   

   这里，Object.assign 只对对象的第一层进行了复制，b对象的引用被复制，因此修改clone的b.c属性会影响原对象。

2. 扩展运算符 ...:

   const obj = { a: 1, b: { c: 2 } };
   const clone = { ...obj };
   clone.b.c = 3;
   console.log(obj.b.c); // 输出 3
   

   这个方法同样是浅克隆。

深克隆（Deep Clone）

深克隆会递归地复制对象或数组的所有嵌套属性，使得新对象与原对象完全独立。

深克隆的方法：

1. JSON.parse(JSON.stringify()):

   const obj = { a: 1, b: { c: 2 } };
   const deepClone = JSON.parse(JSON.stringify(obj));
   deepClone.b.c = 3;
   console.log(obj.b.c); // 输出 2
   

   这种方法适用于简单的对象和数组，不适合处理函数、undefined、NaN、Infinity等特殊值。

2. 递归克隆:
   可以手动编写递归函数来进行深克隆，这样可以处理更复杂的对象结构，包括函数和特殊值。

   function deepClone(obj) {
       if (obj === null || typeof obj !== 'object') {
           return obj;
       }
   
       if (Array.isArray(obj)) {
           return obj.map(item => deepClone(item));
       }
   
       const clone = {};
       for (let key in obj) {
           if (obj.hasOwnProperty(key)) {
               clone[key] = deepClone(obj[key]);
           }
       }
   
       return clone;
   }
   
   const obj = { a: 1, b: { c: 2 } };
   const clone = deepClone(obj);
   clone.b.c = 3;
   console.log(obj.b.c); // 输出 2
   

总结

• 浅克隆：适用于简单对象或只需要复制第一层属性的情况。
• 深克隆：适用于复杂的嵌套对象，确保新对象与原对象完全独立。

选择使用哪种克隆方法取决于你的具体需求和对象的复杂性。