在前端开发中，深度克隆对象的方法主要有以下几种：
-
JSON.parse(JSON.stringify(obj)): 这是最简单和常用的方法，它利用 JSON 序列化和反序列化来实现深度克隆。 然而，这种方法有一些局限性：- 无法处理循环引用: 如果对象中存在循环引用，则会抛出错误。
- 无法克隆函数、Date、RegExp 等特殊对象: 这些对象在序列化过程中会被转换为字符串或 null。
- 无法克隆 Map、Set、Blob 等新的数据类型: 这些类型无法被 JSON 序列化。
-
Lodash 的
_.cloneDeep(obj): 这是一个功能强大的深度克隆工具，它可以处理各种数据类型，包括循环引用、函数、Date、RegExp、Map、Set 等。 这是推荐使用的第三方库方法。 -
递归克隆: 可以编写一个递归函数来遍历对象的所有属性，并逐个克隆。这种方法可以完全控制克隆过程，并可以根据需要自定义克隆逻辑。 然而，实现起来比较复杂，需要考虑各种数据类型和边界情况，包括循环引用。
-
structuredClone(): 这是一个相对较新的 API，它提供了内置的深度克隆功能，并且比JSON.parse(JSON.stringify())更强大，因为它可以处理循环引用以及更多的数据类型，例如 Date、RegExp、Map、Set、ArrayBuffer、File 和 Blob 对象。 它也比递归方法更简洁，性能更好。 这是目前推荐的首选方法。
我推荐使用 structuredClone()，因为它简洁、高效，并且原生支持，兼容性也越来越好。 如果需要支持更老的浏览器，Lodash 的 _.cloneDeep() 是一个很好的替代方案。
// 使用 structuredClone()
const original = {
a: 1,
b: { c: 2 },
d: [3, 4],
e: new Date(),
f: /regex/,
g: new Map([['key', 'value']]),
h: new Set([1, 2]),
i: (function() { let x = 5; return function() { return x; } })(), // 函数
self: null // 用于演示循环引用
};
original.self = original;
const cloned = structuredClone(original);
console.log(cloned);
console.log(cloned === original); // false
console.log(cloned.e === original.e); // false Date 对象被克隆
console.log(cloned.f === original.f); // false RegExp 对象被克隆
console.log(cloned.g === original.g); // false Map 对象被克隆
console.log(cloned.i === original.i); // false 函数被克隆
console.log(cloned.i()); // 5 函数可以正常执行
console.log(cloned.self === cloned); // true 循环引用被正确处理
// 使用 Lodash 的 _.cloneDeep()
const _ = require('lodash'); // 需要先安装 lodash: npm install lodash
const clonedLodash = _.cloneDeep(original);
console.log(clonedLodash);
console.log(clonedLodash === original); // false
// ... 其他验证与 structuredClone() 相似
总结： structuredClone() 是目前进行深度克隆的首选方法，因为它原生支持，性能好，并且可以处理多种数据类型和循环引用。 如果需要兼容更老的浏览器，可以使用 Lodash 的 _.cloneDeep()。 避免使用 JSON.parse(JSON.stringify())，因为它有诸多限制。