devpoint.cn

在 JavaScript 中，深拷贝指的是创建一个新的对象，这个新的对象与原始对象完全独立，没有任何共享的属性或者数据，它们不共享同一块内存地址。深拷贝会复制原始对象的所有属性和嵌套对象的所有属性，包括嵌套对象中的属性。这意味着，修改拷贝后的对象不会影响原始对象。

深拷贝是一种常见的数据复制方式，它通常用于避免在操作对象时修改原始对象。在 JavaScript 中，可以使用多种方法进行深拷贝，包括递归遍历对象、lodash 的 deepClone 方法、使用 JSON 序列化和反序列化等方式。

JSON 序列化

利用 JSON 序列化和反序列化实现深拷贝，具体实现步骤如下：

1. 使用 JSON.stringify() 方法将原始对象序列化为 JSON 字符串。
2. 使用 JSON.parse() 方法将 JSON 字符串反序列化为新对象。

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

const profile = {
    name: "天行无忌",
    city: "深圳",
};
const newProfile = deepClone(profile);
newProfile.city = "广东深圳";
console.log(profile); // { name: '天行无忌', city: '深圳' }
console.log(newProfile); // { name: '天行无忌', city: '广东深圳' }

使用 JSON 序列化和反序列化实现深拷贝存在一些局限性

• 无法复制函数、正则表达式等特殊对象类型。
• 无法复制对象的循环引用，即对象中存在自己或父对象的引用。

递归遍历对象

以下是一个使用递归遍历实现深拷贝的代码：

function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
        return obj;
    }

    let result = obj.constructor();

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key]);
        }
    }

    return result;
}

const profile = {
    name: "天行无忌",
    city: "深圳",
};
const newProfile = deepClone(profile);
newProfile.city = "广东深圳";
console.log(profile); // { name: '天行无忌', city: '深圳' }
console.log(newProfile); // { name: '天行无忌', city: '广东深圳' }

使用 structuredClone

原生 structuredClone() 方法使用结构化克隆算法创建给定值的深层拷贝。

结构化克隆算法用于复制复杂 JavaScript 对象的算法。通过来自 Worker 的 postMessage() 或使用 IndexedDB 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。

语法如下：

structuredClone(value)
structuredClone(value, { transfer })

• value：被克隆的对象。可以是任何结构化克隆支持的类型。
• transfer：为可选参数，是一个可转移对象的数组，里面的 值 并没有被克隆，而是被转移到被拷贝对象上。

返回值：返回值是原始值的深拷贝。

具体使用方法可以阅读文章《JavaScript 中深拷贝方法structuredClone》