浅拷贝与深拷贝——JS初学者入门指南

2023-09-08 04:58:50

在JS的世界里，变量分为原始类型和引用类型。当我们处理引用类型变量时，就有浅拷贝和深拷贝两种选择。理解浅拷贝和深拷贝的概念，对于管理数据结构和避免常见编程陷阱至关重要。

什么是浅拷贝？

浅拷贝是一种将对象的部分属性复制给新对象的操作。也就是说，新对象与旧对象拥有相同的属性和值，但它们指向不同的内存地址。因此，当我们修改浅拷贝对象时，不会影响到旧对象。

浅拷贝通常用于克隆简单对象，比如字符串、数字和布尔值。这些类型的值保存在栈中，因此浅拷贝只需将它们的值复制到新的内存地址即可。

let obj1 = {
  name: 'John',
  age: 25,
};

let obj2 = {...obj1};

obj2.age = 30;

console.log(obj1); // { name: 'John', age: 25 }
console.log(obj2); // { name: 'John', age: 30 }

上面的代码中，我们创建了一个对象obj1，并将其浅拷贝给obj2。然后，我们修改了obj2的age属性，但obj1的age属性没有改变。这是因为浅拷贝只复制了obj1的属性和值，而没有复制obj1对象的引用。

什么是深拷贝？

深拷贝是一种将对象的所有属性和值复制给新对象的操作。也就是说，新对象与旧对象拥有相同的属性、值和内存地址。因此，当我们修改深拷贝对象时，也会影响到旧对象。

深拷贝通常用于克隆复杂对象，比如数组、对象和函数。这些类型的值保存在堆中，因此深拷贝需要将它们的值和内存地址都复制到新的内存地址。

let obj1 = {
  name: 'John',
  age: 25,
  friends: ['Alice', 'Bob'],
};

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

obj2.age = 30;
obj2.friends.push('Carol');

console.log(obj1); // { name: 'John', age: 30, friends: ['Alice', 'Bob', 'Carol'] }
console.log(obj2); // { name: 'John', age: 30, friends: ['Alice', 'Bob', 'Carol'] }