json.parse(json.stringify(arr))不能完全克隆多维数组，因为它无法处理函数、undefined、symbol、bigint、date、regexp及循环引用，会导致数据丢失或报错；2. 推荐使用structuredclone()进行深度克隆，因为它能正确处理date、regexp、map、set、arraybuffer等复杂类型，并支持循环引用，是现代环境下的首选方案；3. 编写通用深度克隆函数可通过递归实现，结合weakmap处理循环引用，并针对不同对象类型（如date、regexp、map、set）分别克隆，从而应对structuredclone()不支持的场景或旧环境需求，确保所有嵌套层级被独立复制。
在JavaScript中克隆多维数组，核心在于实现“深拷贝”。简单地使用赋值操作符或者像 slice()、concat() 这样的方法，只能实现“浅拷贝”，这意味着数组的子元素（如果它们是对象或数组）仍然会引用原始内存地址。要真正克隆多维数组，你需要确保所有嵌套的层级都被独立复制，而不是仅仅复制引用。
解决方案
要深度克隆一个JavaScript多维数组，有几种方法，每种都有其适用场景和局限性。
一个常见且快速的方法是利用 JSON.parse(JSON.stringify(arr))。这种方式的原理是先将数组转换为JSON字符串，再将字符串解析回新的JavaScript对象。因为JSON字符串不包含引用，所以解析出的新对象是完全独立的。
立即学习“Java免费学习笔记（深入）”；
然而，这种方法并非万能。它有明显的局限性：
- 它无法处理函数、undefined、Symbol 或 BigInt 类型的数据，这些会在转换过程中丢失。
- Date 对象会被转换为ISO格式的字符串，而不是保持为 Date 对象。
- RegExp 对象会变成空对象 {}。
- 它不能处理循环引用（即对象内部引用了自身或其父级），会导致报错。
对于更健壮的深拷贝，现代JavaScript环境提供了 structuredClone() API。这是一个更推荐的方法，它基于结构化克隆算法，能处理更多的数据类型，包括 Map、Set、Date、RegExp、ArrayBuffer 等，并且能够正确处理循环引用。
如果需要更精细的控制，或者要兼容不支持 structuredClone() 的旧环境，编写一个递归的深拷贝函数是必要的。这个函数可以根据需要定制，例如决定如何处理函数、DOM节点等特殊类型。
JSON.parse(JSON.stringify(arr)) 真的能完全克隆多维数组吗？
说实话，我个人觉得这个方法更像是一个“快速但不完美”的技巧，而不是一个通用的解决方案。它确实能处理大多数由数字、字符串、布尔值、纯对象和数组组成的简单多维数组。比如，你有一个全是数字和字符串构成的二维数组，或者嵌套了几层的纯数据对象，JSON.parse(JSON.stringify(arr)) 跑起来是没问题的，而且效率还不错。
但问题在于，真实世界的JavaScript数据结构往往比我们想象的要复杂。一旦你的数组里混入了 Date 对象（它们会被转成字符串，你就失去了 Date 对象的所有方法）、undefined（它们会直接消失）、函数（同样消失）、或者更糟的，如果你有循环引用（比如对象A引用了对象B，同时对象B又引用了对象A），那么 JSON.stringify 就会直接抛出错误。这就像你试图把一个活生生的人塞进一个只能装扁平照片的信封里，结果肯定是不行的。所以，它的适用范围其实相当有限，只适合那些“纯粹”的数据结构。
推荐使用 structuredClone() 进行深度克隆吗？
绝对推荐！如果你的目标环境支持 structuredClone()（目前主流浏览器和Node.js都支持得很好），那么这无疑是进行深度克隆的首选。我个人在项目中，只要条件允许，都会优先考虑它。
为什么呢？因为它太方便了，而且功能强大。它不仅能正确处理我们前面提到的 Date 对象（克隆后依然是 Date 对象），还能处理 RegExp、Map、Set、ArrayBuffer、Blob、File 等多种复杂类型。更重要的是，它能够优雅地处理循环引用，不会像 JSON.stringify 那样直接报错。这极大地减少了我们作为开发者需要考虑的边界情况。
用它的时候，感觉就像是JavaScript终于给了一个官方的、一劳永逸的深拷贝方案。你不需要再去找各种第三方库，也不用自己手写复杂的递归逻辑。它就是为了这个目的而设计的，并且被广泛测试和优化过。当然，它也有一些不能克隆的东西，比如函数（函数本质上是行为，而不是数据，通常我们不克隆函数，而是共享引用），或者DOM节点。但对于绝大多数数据结构的深拷贝需求，structuredClone() 都是一个非常可靠且高效的选择。
如何编写一个更通用的深度克隆函数来应对复杂场景？
当 structuredClone() 不可用（比如旧环境），或者你需要处理一些 structuredClone() 无法处理的特殊类型（例如你想克隆函数，或者有特定的自定义对象处理逻辑），手写一个递归的深拷贝函数就变得不可避免了。这确实需要一些思考，特别是要处理好循环引用，否则很容易陷入无限递归的泥潭。
一个相对健壮的深拷贝函数，通常会用到一个 Map 或 WeakMap 来存储已经克隆过的对象，以避免循环引用导致的死循环。
function deepClone(obj, hash = new WeakMap()) {
// 基础类型或null，直接返回
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理特殊内置对象
if (obj instanceof Date) {
return new Date(obj);
}
if (obj instanceof RegExp) {
return new RegExp(obj);
}
if (obj instanceof Map) {
const newMap = new Map();
for (const [key, value] of obj) {
newMap.set(deepClone(key, hash), deepClone(value, hash));
}
return newMap;
}
if (obj instanceof Set) {
const newSet = new Set();
for (const value of obj) {
newSet.add(deepClone(value, hash));
}
return newSet;
}
// 处理循环引用：如果该对象已被克隆过，直接返回克隆后的对象
if (hash.has(obj)) {
return hash.get(obj);
}
// 根据是数组还是普通对象创建新的容器
const clone = Array.isArray(obj) ? [] : {};
// 将新创建的克隆对象存入hash，以便处理循环引用
hash.set(obj, clone);
// 递归克隆所有属性
for (const key in obj) {
// 确保只处理对象自身的属性，而不是原型链上的
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = deepClone(obj[key], hash);
}
}
return clone;
}
// 示例使用
const originalArray = [
1,
'hello',
{ a: 1, b: [2, 3] },
new Date(),
new RegExp(/abc/g),
new Map([['key1', 'value1']]),
new Set([10, 20])
];
originalArray[2].selfRef = originalArray; // 制造一个循环引用
const clonedArray = deepClone(originalArray);
console.log(clonedArray);
console.log(clonedArray[2].selfRef === clonedArray); // 检查循环引用是否被正确处理
console.log(clonedArray[3] instanceof Date); // 检查Date对象是否被正确克隆
console.log(clonedArray[4] instanceof RegExp); // 检查RegExp对象是否被正确克隆
console.log(clonedArray[5] instanceof Map); // 检查Map对象是否被正确克隆
这个函数考虑了基本类型、日期、正则表达式、Map、Set以及最重要的循环引用。它使用 WeakMap 作为 hash 表，这样当原始对象不再被引用时，垃圾回收机制可以清理掉 WeakMap 中的对应条目，避免内存泄漏。编写这样的函数，你才能真正掌控深拷贝的每一个细节，应对那些“不走寻常路”的数据结构。
暂无评论内容