JavaScript多维数组克隆技巧分享

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript多维数组克隆方法详解》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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字符串不包含引用，所以解析出的新对象是完全独立的。

然而，这种方法并非万能。它有明显的局限性：

• 它无法处理函数、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多维数组克隆技巧分享》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于多维数组,深拷贝,循环引用,JSON.parse(JSON.stringify()),structuredClone()的内容请关注golang学习网公众号！