深拷贝 JavaScript 对象：掌握这门艺术，提升代码质量
2024-01-09 10:00:51
理解深拷贝和浅拷贝的艺术
在编写 JavaScript 代码时，我们需要经常处理对象，这些对象包含各种属性，这些属性可以是简单的数据类型（如字符串或数字），也可以是其他对象的引用。当我们复制这些对象时，需要区分浅拷贝和深拷贝。
浅拷贝：一个简单的复制
浅拷贝创建一个新对象，其中包含原始对象的属性值的副本。然而，如果这些属性值本身是对象或数组，浅拷贝只会复制它们的引用，而不是创建这些值的全新副本。
深拷贝：一个彻底的克隆
另一方面，深拷贝创建原始对象的一个全新副本，其中包含该对象所有属性的新副本，无论这些属性是简单数据类型还是复杂对象。通过这种方式，深拷贝确保新对象与原始对象完全分离，并且对其中任何一个所做的更改都不会影响另一个。
何时使用深拷贝？
以下是使用深拷贝的情况：
- 防止意外修改： 深拷贝可防止对原始对象及其属性的意外修改。
- 独立性： 深拷贝确保对象数据的独立性，允许并发操作而不相互影响。
- 敏感数据： 传递敏感数据时，深拷贝可确保数据不被未经授权地修改。
- 克隆和存储： 深拷贝允许克隆对象并将其存储在不同的位置（如缓存或数据库），而不会影响原始对象。
JavaScript 中的深拷贝方法
在 JavaScript 中，有几种方法可以进行深拷贝：
使用 JSON.parse() 和 JSON.stringify()
const deepCopy = JSON.parse(JSON.stringify(originalObject));
这种方法通过将原始对象转换为 JSON 字符串，然后再将其解析为新对象来实现深拷贝。它适用于各种类型的对象，是一个简单通用的方法。
使用递归函数
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;
}
此函数使用递归遍历原始对象并创建其深拷贝。它根据对象类型（简单数据类型、数组或对象）处理不同的情况。
使用 Lodash _.cloneDeep()
如果你使用 Lodash 库，它提供了一个名为 _.cloneDeep() 的实用程序，可以轻松进行深拷贝：
import { cloneDeep } from 'lodash';
const deepCopy = cloneDeep(originalObject);
代码示例：
考虑以下对象：
const originalObject = {
name: "John",
age: 30,
address: {
street: "Main Street",
number: 123,
},
};
要进行浅拷贝，我们可以使用如下代码：
const shallowCopy = Object.assign({}, originalObject);
要进行深拷贝，我们可以使用 JSON 方法：
const deepCopy = JSON.parse(JSON.stringify(originalObject));
或者使用递归函数：
const deepCopy = deepCopy(originalObject);
常见问题解答
1. 浅拷贝和深拷贝有什么区别？
浅拷贝仅复制对象属性值的副本，而深拷贝创建一个原始对象的新副本，其中包含该对象所有属性的新副本。
2. 为什么需要深拷贝？
深拷贝可防止意外修改、确保数据独立性、传递敏感数据并克隆对象以进行存储。
3. 如何在 JavaScript 中进行深拷贝？
可以使用 JSON.parse()/JSON.stringify()、递归函数或 Lodash _.cloneDeep() 进行深拷贝。
4. 浅拷贝何时有用？
浅拷贝在不希望影响原始对象的情况下进行简单的数据复制时很有用。
5. Lodash _.cloneDeep() 的优点是什么？
_.cloneDeep() 是一个方便的实用程序，可轻松进行深拷贝，而无需编写自定义函数或使用 JSON 方法。
结论
理解和掌握浅拷贝和深拷贝是编写健壮 JavaScript 代码的关键。通过利用这两种方法之间的差异，你可以避免常见错误，确保对象数据的独立性，并提升代码的整体质量。本指南中概述的技巧将帮助你自信地在项目中应用深拷贝，提高你的编码能力并构建更可靠的应用程序。
