解密浅拷贝与深拷贝：揭开数据类型中的秘密

前端

2024-02-05 18:51:25

浅拷贝与深拷贝：数据类型拷贝的奥秘

在编程的海洋中，数据拷贝是一个至关重要的概念，因为它决定了如何处理和操作数据。在这片浩瀚无垠的领域里，浅拷贝和深拷贝犹如两座灯塔，指引着我们安全穿越数据拷贝的暗礁。

数据类型：基石之石

在深入浅拷贝与深拷贝之前，让我们先回顾一下 JavaScript 中的数据类型。数据类型是 JavaScript 用来对数据进行分类和组织的方式。主要分为两大类：

原始数据类型： 这些类型的值不可被进一步细分，包括字符串、数字、布尔值、null 和 undefined。
引用数据类型： 这些类型的值存储在堆内存中，并通过引用访问，包括对象、数组和函数。

浅拷贝：浅显易懂，却潜藏陷阱

浅拷贝，顾名思义，只拷贝一层数据。它只拷贝最外层的数据，而不会深入子对象或子数组中进行拷贝。这种方法简单高效，但潜藏着陷阱。

const obj1 = {
  name: 'Alice',
  age: 20,
  address: {
    street: 'Main Street',
    city: 'New York'
  }
};

const obj2 = {...obj1}; // 浅拷贝

// 修改 obj2 中的 address 属性
obj2.address.city = 'London';

// 查看 obj1 和 obj2 的 address 属性
console.log(obj1.address.city); // London

在这个示例中，我们对 obj2 的 address 属性进行了修改，结果 obj1 的 address 属性也随之改变了！这是怎么回事？

这是因为浅拷贝只拷贝了最外层的数据，即 obj1 和 obj2 都指向同一个 address 对象。因此，当我们修改 obj2 的 address 属性时，实际上修改的是两个对象共用的同一个 address 对象，自然 obj1 的 address 属性也会受到影响。

深拷贝：全面复制，无懈可击

与浅拷贝不同，深拷贝会不遗余力地拷贝每一层数据，无论多深层次的子对象或子数组，都会被完整地复制一遍。这样一来，修改深拷贝后的对象，不会对原对象产生任何影响。

const obj1 = {
  name: 'Alice',
  age: 20,
  address: {
    street: 'Main Street',
    city: 'New York'
  }
};

const obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝

// 修改 obj2 中的 address 属性
obj2.address.city = 'London';

// 查看 obj1 和 obj2 的 address 属性
console.log(obj1.address.city); // New York