js深拷贝浅拷贝

场景

深拷贝和浅拷贝在不同的场景中有不同的用途和优缺点。下面是它们的一些常见使用场景和优缺点的总结：

浅拷贝的使用场景：

• 当需要创建一个对象的副本，但不需要修改副本的属性时，可以使用浅拷贝。这样可以避免修改副本对原始对象产生影响。
• 当需要将对象的一部分属性复制到另一个对象中时，浅拷贝可以很方便地实现这个目标。

浅拷贝的优点：

• 浅拷贝比深拷贝更快速和高效，尤其是在处理大型对象或嵌套层次很深的对象时。
• 浅拷贝可以保留原始对象的引用关系，这对于一些特定的应用场景可能是有用的。

浅拷贝的缺点：

• 浅拷贝只复制对象的引用，而不是对象本身。这意味着如果修改副本对象的属性，原始对象也会受到影响。
• 当原始对象包含嵌套的对象或数组时，浅拷贝只会复制嵌套对象的引用，而不会复制嵌套对象本身。这可能导致修改副本对象的嵌套对象属性时，原始对象也会受到影响。

深拷贝的使用场景：

• 当需要创建一个完全独立于原始对象的副本，且不希望修改副本对原始对象产生任何影响时，可以使用深拷贝。
• 当原始对象包含循环引用时，深拷贝可以避免循环引用的问题。

深拷贝的优点：

• 深拷贝可以创建一个完全独立于原始对象的副本，修改副本对象的属性不会对原始对象产生任何影响。
• 深拷贝可以复制对象的所有属性，包括函数和循环引用的对象。

深拷贝的缺点：

• 深拷贝比浅拷贝更耗时和耗内存，特别是在处理大型对象或嵌套层次很深的对象时。
• 深拷贝可能会导致堆栈溢出，因此需要谨慎使用。

在选择深拷贝还是浅拷贝时，需要根据具体的需求和场景进行权衡和选择。如果只需要复制对象的一部分属性或不需要修改副本对象，可以使用浅拷贝。如果需要创建一个完全独立于原始对象的副本，或者原始对象包含嵌套的对象或循环引用，可以使用深拷贝。

浅拷贝

在JavaScript中，深拷贝和浅拷贝是两种常用的对象复制方式。

浅拷贝是指创建一个新对象，然后将原始对象的属性值复制到新对象中。新对象和原始对象的引用类型属性将指向相同的内存地址。这意味着当对新对象进行修改时，原始对象也会受到影响。浅拷贝可以通过以下方式实现：

1. 使用Object.assign()方法进行浅拷贝。

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = Object.assign({}, obj1);
obj2.a = 3;
console.log(obj1.a); // 输出：1
console.log(obj2.a); // 输出：3

obj2.b.c = 4;
console.log(obj1.b.c); // 输出：4
console.log(obj2.b.c); // 输出：4

2. 使用扩展运算符（...）进行浅拷贝。

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = { ...obj1 };
obj2.a = 3;
console.log(obj1.a); // 输出：1
console.log(obj2.a); // 输出：3

obj2.b.c = 4;
console.log(obj1.b.c); // 输出：4
console.log(obj2.b.c); // 输出：4

深拷贝

深拷贝是指创建一个完全独立的新对象，新对象和原始对象的所有属性都是相互独立的，修改新对象不会影响原始对象。深拷贝可以通过以下方式实现：

1. 使用JSON.parse(JSON.stringify())方法进行深拷贝。这种方法可以将对象转换为字符串，然后再将字符串转换回对象，从而创建一个完全独立的新对象。但是需要注意的是，这种方法无法复制函数和循环引用的对象。

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
obj2.a = 3;
console.log(obj1.a); // 输出：1
console.log(obj2.a); // 输出：3

obj2.b.c = 4;
console.log(obj1.b.c); // 输出：2
console.log(obj2.b.c); // 输出：4

2. 使用递归实现自定义的深拷贝函数。

这种方法可以复制对象的所有属性，包括函数和循环引用的对象。但是需要注意的是，这种方法可能会导致堆栈溢出，因此需要谨慎使用。

function deepCopy(obj) {
  var newObj = {};

  for (var key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      newObj[key] = deepCopy(obj[key]);
    } else {
      newObj[key] = obj[key];
    }
  }

  return newObj;
}

var obj1 = { a: 1, b: { c: 2 } };
var obj2 = deepCopy(obj1);
obj2.a = 3;
console.log(obj1.a); // 输出：1
console.log(obj2.a); // 输出：3

obj2.b.c = 4;
console.log(obj1.b.c); // 输出：2
console.log(obj2.b.c); // 输出：4

常见例子

需要注意的是，深拷贝可能会导致性能问题，特别是在处理大型对象或嵌套层次很深的对象时。因此，在选择深拷贝还是浅拷贝时，需要根据具体情况进行权衡和选择。

当涉及到深拷贝和浅拷贝时，以下是一些常见的例子：

1. 浅拷贝的例子：

var obj1 = { name: 'John', age: 25 };
var obj2 = Object.assign({}, obj1);

obj2.name = 'Tom';

console.log(obj1.name); // 输出：John
console.log(obj2.name); // 输出：Tom

在这个例子中，使用Object.assign()方法将obj1的属性复制到obj2，修改obj2的name属性不会影响obj1。

2. 深拷贝的例子：

var obj1 = { name: 'John', address: { city: 'New York', country: 'USA' } };
var obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.city = 'London';

console.log(obj1.address.city); // 输出：New York
console.log(obj2.address.city); // 输出：London

在这个例子中，使用JSON.parse(JSON.stringify())方法将obj1深拷贝到obj2，修改obj2的address.city属性不会影响obj1。

3. 数组的浅拷贝和深拷贝：

var arr1 = [1, 2, [3, 4]];
var arr2 = arr1.slice();

arr2[0] = 5;
arr2[2][0] = 6;

console.log(arr1); // 输出：[1, 2, [6, 4]]
console.log(arr2); // 输出：[5, 2, [6, 4]]

在这个例子中，使用数组的slice()方法进行浅拷贝，修改arr2的元素不会影响arr1。但是，当修改arr2中嵌套数组的元素时，arr1也会受到影响。

4. 对象的浅拷贝和深拷贝：

var obj1 = { name: 'John', address: { city: 'New York', country: 'USA' } };
var obj2 = { ...obj1 };

obj2.address.city = 'London';

console.log(obj1.address.city); // 输出：London
console.log(obj2.address.city); // 输出：London

在这个例子中，使用扩展运算符（...）进行浅拷贝，修改obj2的address.city属性会影响obj1。

这些例子展示了浅拷贝和深拷贝的不同行为，根据实际需求选择适合的拷贝方式非常重要。