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 中的对应条目，避免内存泄漏。编写这样的函数，你才能真正掌控深拷贝的每一个细节，应对那些“不走寻常路”的数据结构。
以上就是javascript怎么克隆多维数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1512452.html
微信扫一扫 
支付宝扫一扫 
