js 对象深拷贝的五种方法

js 对象深拷贝

今天遇到一个bug ，子组件页面修改了内容，但是按了取消保存按钮，没有将数据传回父组件的，但是父组件的数据改了，原因是通过子组件接受父组件的参数对象层级深没有做深拷贝的原因。

在 JavaScript 中，深拷贝是指复制一个对象及其所有嵌套对象的完整副本，而不是仅仅复制引用。以下是几种实现深拷贝的方法：

方法 1：使用 JSON.parse 和 JSON.stringify

这是最简单的方法，但有一些限制（例如，无法拷贝函数、undefined、Symbol 等）。

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));

console.log(deepCopy); // { a: 1, b: { c: 2 } }

注意：

• 无法拷贝函数、undefined、Symbol。
• 不支持循环引用。

方法 2：使用递归实现深拷贝

手动实现一个递归函数来处理对象和数组。

function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
        return obj; // 基本类型直接返回
    }

    // 创建一个新对象或数组
    const copy = Array.isArray(obj) ? [] : {};

    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key]); // 递归拷贝
        }
    }

    return copy;
}

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = deepClone(obj);

console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

方法 3：使用 lodash 库

lodash 是一个流行的 JavaScript 工具库，其中的 cloneDeep 方法可以轻松实现深拷贝。

import _ from "lodash";

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = _.cloneDeep(obj);

console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

优点：

• 支持复杂对象（如循环引用）。
• 可靠且易用。

方法 4：使用 structuredClone（现代浏览器支持）

structuredClone 是一种原生方法，用于深拷贝对象。

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = structuredClone(obj);

console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

优点：

• 支持循环引用。
• 原生方法，性能较好。

注意：

• 仅在现代浏览器和 Node.js 17+ 中支持。

方法 5：使用 Object.create 和递归

通过 Object.create 创建新对象，并递归拷贝属性。

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

    const copy = Object.create(Object.getPrototypeOf(obj));

    for (const key of Object.keys(obj)) {
        copy[key] = deepClone(obj[key]);
    }

    return copy;
}

const obj = { a: 1, b: { c: 2 }, d: [3, 4] };
const deepCopy = deepClone(obj);

console.log(deepCopy); // { a: 1, b: { c: 2 }, d: [3, 4] }

总结

• 简单对象：可以使用 JSON.parse(JSON.stringify(obj)。
• 复杂对象：推荐使用 lodash.cloneDeep 或 structuredClone。
• 自定义实现：可以使用递归函数处理特殊需求。