JavaScript深浅拷贝原理与递归实现详解

在前端JavaScript中，深浅拷贝是一个关键概念，尤其是在处理复杂数据类型如对象和数组时。深浅拷贝主要涉及原始数据类型（基本类型）和引用数据类型（如对象）之间的差异。基本数据类型包括Boolean、Null、Undefined、Number、String、Symbol（ES6新增）、BigInt（ES10），它们直接存储在栈中，拷贝时无需关注深度问题。 引用数据类型如对象、数组、函数等存储的是对堆内存中数据的引用，而不是实际值。当我们将一个对象赋值给新变量时，实际上是将对象的引用复制，导致新旧对象指向同一块内存区域。这就出现了浅拷贝和深拷贝的概念： 1. **浅拷贝**： - 当我们简单地赋值或使用`Object.assign()`进行浅拷贝时，新对象会复制原始对象的属性值，包括基本类型值和引用类型（如对象）。然而，如果属性是引用类型，浅拷贝实际上只复制了内存地址，而不是实际的对象。这意味着对一个对象的修改会影响到与其共享内存的其他对象。 - 常见浅拷贝的例子如`let newObj = obj;` 或 `var newObj = Object.assign({}, obj)`，这种操作会导致两个对象关联性较强，一个对象的更改会影响另一个。 2. **深拷贝**： - 相比之下，深拷贝是对对象的完全独立复制，不仅复制了属性值，还重新创建了所有嵌套对象和数组。这意味着新对象有自己的内存空间，修改新对象不会影响原对象。 - 实现深拷贝的方法有多种，比如使用递归遍历对象，手动创建新对象并复制每个属性（包括其内部结构），或者借助第三方库如lodash的`_.cloneDeep()`方法。这些方法会确保新对象与原对象完全分离。 在实践中，了解深浅拷贝的区别非常重要，尤其是在需要保护数据独立性、避免意外修改或者复用对象时。例如，在函数参数传递、组件状态管理、数据持久化等场景下，正确选择深浅拷贝的方式可以有效提高代码的健壮性和性能。