angular深拷贝与浅拷贝

Angular中的深拷贝和浅拷贝是针对对象和数组而言的。

浅拷贝是指将源对象或数组的引用复制给目标对象或数组，这意味着源对象和目标对象引用同一个内存地址。当对其中一个对象进行修改时，另一个对象也会受到影响。

深拷贝是指创建一个新的对象或数组，并将源对象或数组的值逐个复制到新的对象或数组中。这样，当对其中一个对象进行修改时，另一个对象不会受到影响。

在Angular中，可以使用一些方法来进行深拷贝和浅拷贝：

1. 浅拷贝：
- Object.assign(target, source): 这个方法会将源对象的属性复制到目标对象中。但是如果属性值是对象或数组，仍然是浅拷贝。
- Spread Operator: 可以使用展开运算符(...)来执行浅拷贝。例如：`const copiedArray = [...sourceArray];`

2. 深拷贝：
- JSON.parse(JSON.stringify(source)): 这是一种常用的深拷贝方式。首先将源对象转换为字符串，然后再将其解析为新的对象。但是请注意，这种方法无法处理函数、正则表达式和循环引用等特殊情况。
- Lodash库: Lodash提供了深拷贝函数`_.cloneDeep(source)`，可以处理复杂的深拷贝需求。

需要根据具体场景选择合适的拷贝方式。浅拷贝通常适用于简单的对象和数组，而深拷贝更适用于复杂的嵌套结构。

相关问题

深拷贝浅拷贝的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 的属性没有被修改，这是因为深拷贝会复制出一个新的对象，与原对象不共享内存地址。

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