JavaScript 浅拷贝和深拷贝：揭秘背后的奥秘

前端

2023-11-09 02:29:32

引言

在 JavaScript 中，对象是引用类型。当我们复制对象时，需要权衡浅拷贝和深拷贝之间的差异。本文将深入探讨这两种拷贝方式，揭示它们之间的细微差别，并提供实用示例来阐明它们在实际应用中的影响。

浅拷贝

浅拷贝是一种快速的拷贝方法，它仅复制对象本身的属性，而不会递归复制嵌套对象或数组。这意味着如果源对象中存在对另一个对象的引用，则浅拷贝只会复制该引用，而不是复制被引用的对象本身。

优点：

速度快： 浅拷贝只需复制对象的浅层属性，因此速度非常快。
简单实现： 使用诸如 Object.assign() 或扩展运算符 (...) 等原生方法即可轻松实现浅拷贝。

局限性：

不会复制嵌套对象： 浅拷贝无法复制嵌套对象或数组，因此它们在目标对象中的引用仍然指向源对象中的原始对象。

深拷贝

深拷贝是一种更彻底的拷贝方法，它递归地复制对象及其所有嵌套对象和数组。这确保了目标对象中的所有数据都独立于源对象，即使它们存在嵌套关系。

优点：

独立性： 深拷贝创建了一个与源对象完全独立的新对象，消除了修改目标对象时影响源对象或其他副本的风险。
嵌套支持： 深拷贝会复制对象树中的所有层级，包括嵌套对象和数组。

局限性：

速度慢： 由于深拷贝需要递归地复制所有层级，因此速度比浅拷贝慢得多。
实现复杂： 实现一个通用的深拷贝函数需要更复杂的算法，因为它需要遍历对象的所有属性并递归地复制嵌套结构。

示例

以下代码示例演示了浅拷贝和深拷贝之间的差异：

// 浅拷贝
const obj1 = { name: 'John', age: 30 };
const obj2 = Object.assign({}, obj1);

// 修改 obj2 中的 age
obj2.age = 35;

// 检查 obj1 是否受影响
console.log(obj1.age); // 输出：30（不受影响）

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

// 修改 obj3 中的 age
obj3.age = 40;

// 检查 obj1 是否受影响
console.log(obj1.age); // 输出：30（不受影响）