深拷贝浅拷贝的demo

深拷贝和浅拷贝都是复制一个对象，区别在于复制后的对象与原对象是否共享同一内存地址。深拷贝会复制出一个新的对象，与原对象不共享内存地址，而浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。

以下是深拷贝和浅拷贝的示例代码：

// 浅拷贝示例
let obj1 = {
  name: 'Alice',
  age: 20,
  skills: ['JavaScript', 'Vue', 'React']
}

let obj2 = Object.assign({}, obj1) // 使用 Object.assign() 方法进行浅拷贝

obj2.age = 21 // 修改 obj2 的 age 属性
obj2.skills.push('Angular') // 修改 obj2 的 skills 属性

console.log(obj1) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
console.log(obj2) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
// 可以看到，修改了 obj2 的属性后，obj1 的 skills 属性也被修改了，这是因为浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。

// 深拷贝示例
let obj3 = {
  name: 'Alice',
  age: 20,
  skills: ['JavaScript', 'Vue', 'React']
}

let obj4 = JSON.parse(JSON.stringify(obj3)) // 使用 JSON.parse() 和 JSON.stringify() 方法进行深拷贝

obj4.age = 21 // 修改 obj4 的 age 属性
obj4.skills.push('Angular') // 修改 obj4 的 skills 属性

console.log(obj3) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React' ] }
console.log(obj4) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
// 可以看到，修改了 obj4 的属性后，obj3 的属性没有被修改，这是因为深拷贝会复制出一个新的对象，与原对象不共享内存地址。

需要注意的是，深拷贝虽然可以解决浅拷贝的问题，但是由于深拷贝会递归地复制对象的所有属性，所以可能会导致性能问题，特别是在处理大型复杂对象时。因此，需要根据具体情况选择合适的拷贝方法。