深拷贝和浅拷贝的区别

2023-09-29 02:18:30

前言

在 JavaScript 开发中，理解深拷贝和浅拷贝之间的区别至关重要。这两个概念在管理对象和它们的属性时发挥着关键作用，影响着数据的完整性。本文将深入探讨深拷贝和浅拷贝，并通过示例说明它们之间的差异。

浅拷贝

浅拷贝是一种复制对象的方法，它创建一个新对象并分配其自身内存空间，但仅复制原始对象的顶级属性。对于基本类型（如字符串、数字和布尔值），浅拷贝创建原始值的副本。但是，对于引用类型（如数组和对象），浅拷贝只是复制对原始对象属性的引用。

const obj1 = {
  name: 'John',
  age: 30,
  hobbies: ['coding', 'reading']
};

const obj2 = Object.assign({}, obj1);

obj2.name = 'Jane';
obj2.hobbies.push('writing');

console.log(obj1); // { name: 'Jane', age: 30, hobbies: ['coding', 'reading', 'writing'] }

在上面的示例中，obj2 对 obj1 进行了浅拷贝。obj1 的 name 和 age 属性被直接复制，而 hobbies 属性的引用则被复制到 obj2 中。当我们修改 obj2 的 name 属性和 hobbies 数组时，它也影响了 obj1，因为它们指向同一块内存。

深拷贝

深拷贝创建原始对象的完全副本，包括所有属性及其值，无论它们是基本类型还是引用类型。它会递归地复制对象的每一层，确保新对象与原始对象完全独立。

实现深拷贝有几种方法，例如：

JSON.parse(JSON.stringify(obj)) ：使用 JSON 序列化和反序列化来创建深拷贝。
使用第三方库 ：Lodash 和 jQuery 等库提供深拷贝功能。
自定义函数 ：编写自己的递归函数来遍历对象并创建副本。

const obj1 = {
  name: 'John',
  age: 30,
  hobbies: ['coding', 'reading']
};

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

obj2.name = 'Jane';
obj2.hobbies.push('writing');

console.log(obj1); // { name: 'John', age: 30, hobbies: ['coding', 'reading'] }