在工作中，我们经常会用到深拷贝与浅拷贝，但你是否思考过什么时候使用它，为什么需要使用它，深浅拷贝有何异同，什么是深拷贝，如何实现呢？今天就为大家总结一下吧。
<h2>栈内存与堆内存</h2>
<p>在了解深拷贝与浅拷贝之前，需要先了解栈内存与堆内存的概念。栈内存用于存储局部变量、函数参数和返回地址等信息，而堆内存用于存储动态分配的对象。栈内存的大小是固定的，而堆内存的大小是动态变化的。</p>
<h2>浅拷贝与深拷贝</h2>
<p>浅拷贝和深拷贝都是复制对象的方式，但它们之间存在着本质的区别。</p>
<ul class="list">
<li>浅拷贝只复制对象本身，而不复制对象引用的其他对象。例如，如果一个对象包含一个对另一个对象的引用，那么浅拷贝只复制对另一个对象的引用，而不复制另一个对象本身。</li>
<li>深拷贝复制对象本身及其引用的所有对象。例如，如果一个对象包含一个对另一个对象的引用，那么深拷贝复制对另一个对象的引用，也复制另一个对象本身。</li>
</ul>
<h2>什么时候使用深拷贝？</h2>
<p>一般情况下，当我们需要对一个对象进行完全复制时，使用深拷贝。例如，在需要将一个对象保存到数据库中时，可以使用深拷贝来确保对象在数据库中是独立的，不会受到其他对象的修改的影响。</p>
<h2>如何实现深拷贝？</h2>
<p>在 JavaScript 中，可以通过以下方式实现深拷贝：</p>
<ul class="list">
<li>使用 JSON.stringify() 和 JSON.parse() 函数。这种方法可以将对象转换成 JSON 字符串，然后再将 JSON 字符串解析回对象。这样就可以实现深拷贝。</li>
<li>使用递归函数。这种方法可以遍历对象及其引用的所有对象，并逐一复制这些对象。这样也可以实现深拷贝。</li>
</ul>
<div class="code-block">
<code>
// 使用 JSON.stringify() 和 JSON.parse() 函数实现深拷贝
const obj1 = {
name: 'John',
age: 30,
address: {
street: '123 Main Street',
city: 'Anytown',
state: 'CA',
zip: '12345'
}
};
const obj2 = JSON.parse(JSON.stringify(obj1));
// 修改 obj2 的 address 属性
obj2.address.street = '456 Elm Street';
// 打印 obj1 和 obj2 的 address 属性
console.log(obj1.address.street); // 123 Main Street
console.log(obj2.address.street); // 456 Elm Street
</code>
</div>
<div class="code-block">
<code>
// 使用递归函数实现深拷贝
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
if (Array.isArray(obj)) {
return obj.map(item => deepCopy(item));
}
const newObj = {};
for (const key in obj) {
newObj[key] = deepCopy(obj[key]);
}
return newObj;
}
const obj1 = {
name: 'John',
age: 30,
address: {
street: '123 Main Street',
city: 'Anytown',
state: 'CA',
zip: '12345'
}
};
const obj2 = deepCopy(obj1);
// 修改 obj2 的 address 属性
obj2.address.street = '456 Elm Street';
// 打印 obj1 和 obj2 的 address 属性
console.log(obj1.address.street); // 123 Main Street
console.log(obj2.address.street); // 456 Elm Street
</code>
</div>
<h2>总结</h2>
<p>深拷贝与浅拷贝是复制对象的不同方式，它们之间存在着本质的区别。深拷贝复制对象本身及其引用的所有对象，而浅拷贝只复制对象本身，而不复制对象引用的其他对象。在需要对一个对象进行完全复制时，可以使用深拷贝。在 JavaScript 中，可以通过 JSON.stringify() 和 JSON.parse() 函数或递归函数来实现深拷贝。</p>
