JS的深浅复制详细

下面是JS的深浅复制详细攻略。

什么是JS的深浅复制

在JS中，复制一个对象分为浅复制和深复制两种。所谓浅复制就是对象的最外层属性复制到新的对象中，而内层对象以及数组等引用类型则只是将引用地址复制了一份。而深复制则是将对象及其所有嵌套对象、数组等整个复制一份。

浅复制示例

在JS中，可以使用Object.assign()函数来实现浅复制。

let obj1 = {
  name: 'John',
  age: 26,
  hobbies: ['reading', 'writing']
};

let obj2 = Object.assign({}, obj1);

console.log(obj2); // {name: "John", age: 26, hobbies: Array(2)}

// 修改obj2的hobbies属性值
obj2.hobbies.push('coding');

console.log(obj2); // {name: "John", age: 26, hobbies: Array(3)}
console.log(obj1); // {name: "John", age: 26, hobbies: Array(3)}

上面的示例中，我们首先声明了一个包含name、age以及hobbies属性的对象obj1，并将其复制到obj2中。然后我们修改了obj2中的hobbies属性，发现obj1的hobbies属性也随之改变了。这是因为obj1和obj2中的hobbies属性都是引用同一个数组对象。

深复制示例

对于JS中的深复制，我们可以使用递归的方式来完成。具体实现方式有很多种，我们这里使用JSON的stringify()和parse()函数来实现。

let obj1 = {
  name: 'John',
  age: 26,
  hobbies: ['reading', 'writing'],
  address: {
    city: 'New York',
    postcode: '10001'
  }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2); 
// {
//   name: 'John',
//   age: 26,
//   hobbies: ['reading', 'writing'],
//   address: {
//     city: 'New York',
//     postcode: '10001'
//   }
// }

// 修改obj2的address属性值
obj2.address.city = 'Los Angeles';

console.log(obj2); 
// {
//   name: 'John',
//   age: 26,
//   hobbies: ['reading', 'writing'],
//   address: {
//     city: 'Los Angeles',
//     postcode: '10001'
//   }
// }

console.log(obj1); 
// {
//   name: 'John',
//   age: 26,
//   hobbies: ['reading', 'writing'],
//   address: {
//     city: 'New York',
//     postcode: '10001'
//   }
// }

对比深复制示例和浅复制示例，我们可以发现深复制更适用于对于复杂嵌套对象的处理。但需要注意的是，使用JSON的stringify()和parse()函数进行深复制时，会忽略对象中的函数、正则表达式等。