JSON.parse，JSON.stringify 深浅拷贝的缺陷（欢迎评论）
2023-11-09 17:32:19
使用 JSON.parse 和 JSON.stringify 进行深度复制的陷阱
JSON.parse 和 JSON.stringify 是 JavaScript 中进行对象深度复制的常用方法。然而，在使用它们时，了解其局限性至关重要，否则可能会导致数据丢失或不一致。
缺陷：遗漏属性
JSON.stringify 会忽略未定义、符号和不可枚举的属性。在使用 JSON.parse 进行深度复制时，这些属性将丢失。这是因为 JSON.stringify 仅将可序列化值转换为 JSON 字符串。例如，以下代码将丢失 undefined 属性 salary：
const obj = {
name: "John",
age: 30,
salary: undefined,
};
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy); // { name: "John", age: 30 }
缺陷：丢失函数
JSON.stringify 会将函数转换为字符串，而 JSON.parse 会将字符串解析为普通对象。这意味着使用 JSON.parse 进行深度复制时，函数将丢失。例如，以下代码将丢失 greet 函数：
const obj = {
name: "John",
age: 30,
greet: function() {
console.log("Hello!");
},
};
const copy = JSON.parse(JSON.stringify(obj));
copy.greet(); // TypeError: copy.greet is not a function
缺陷：日期对象丢失
JSON.stringify 将日期对象转换为字符串，而 JSON.parse 将字符串解析为新日期对象。然而，新日期对象将丢失原始日期对象的时区信息。例如，以下代码将失去时区信息：
const obj = {
name: "John",
age: 30,
dob: new Date("1990-01-01"),
};
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy.dob); // 1990-01-01T00:00:00.000Z
缺陷：循环引用
如果对象中存在循环引用，JSON.stringify 会抛出错误。这是因为 JSON.stringify 无法处理循环引用。例如，以下代码将抛出错误：
const obj = {
name: "John",
age: 30,
self: obj,
};
JSON.stringify(obj); // TypeError: Converting circular structure to JSON
替代解决方案
为了避免这些缺陷，建议使用更可靠的深度复制方法，例如：
- 使用 Lodash 的 cloneDeep() 方法： Lodash 提供了一个方便的 cloneDeep() 方法，可以进行深度复制，而不会遇到 JSON.parse 和 JSON.stringify 的缺陷。
- 使用 structuredClone() 方法（ES2019+）： structuredClone() 方法是一个本机 JavaScript 方法，可提供可靠的深度复制。
- 手动遍历对象并创建新对象： 虽然不如其他方法有效率，但手动遍历对象并创建新对象也可以实现深度复制，并避免 JSON.parse 和 JSON.stringify 的缺陷。
结论
虽然 JSON.parse 和 JSON.stringify 可以用于对象深度复制，但它们存在缺陷。这些缺陷可能会导致数据丢失或不一致。在需要可靠深度复制时，使用替代解决方案至关重要。通过了解 JSON.parse 和 JSON.stringify 的局限性并采用替代方法，可以确保准确且一致的数据复制。
常见问题解答
-
为什么 JSON.stringify 会忽略某些属性？
JSON.stringify 仅将可序列化值转换为 JSON 字符串，因此未定义、符号和不可枚举的属性将被忽略。 -
如何处理对象中循环引用？
建议使用 Lodash 的 cloneDeep() 方法或 structuredClone() 方法，它们可以处理循环引用。 -
什么时候使用手动深度复制？
当性能不是问题时，可以使用手动深度复制，但对于大型或复杂对象，其他方法更有效率。 -
cloneDeep() 方法和 structuredClone() 方法有什么区别？
cloneDeep() 方法是 Lodash 库中的一个方法，而 structuredClone() 方法是 ES2019+ 中的本机 JavaScript 方法。 -
在什么情况下应避免使用 JSON.parse 和 JSON.stringify 进行深度复制？
当对象包含未定义、符号、不可枚举的属性、函数或循环引用时，应避免使用 JSON.parse 和 JSON.stringify 进行深度复制。
