vue深拷贝

// 深拷贝的实现方式有很多种，以下是几种常见的方法：

// 1. 使用 JSON.parse 和 JSON.stringify
function deepClone(obj) {
    // JSON.stringify 会将对象转换为字符串，JSON.parse 再将其转换回对象
    // 注意：这种方法不能处理函数、undefined、Symbol、Date 等特殊类型
    return JSON.parse(JSON.stringify(obj));
}

// 示例
const obj = { a: 1, b: { c: 2 } };
const clonedObj = deepClone(obj);
console.log(clonedObj); // { a: 1, b: { c: 2 } }
console.log(clonedObj === obj); // false (不同的引用)

// 2. 使用递归实现深拷贝
function deepCloneRecursive(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (hash.has(obj)) {
        return hash.get(obj);
    }

    const result = Array.isArray(obj) ? [] : {};
    hash.set(obj, result);

    for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            result[key] = deepCloneRecursive(obj[key], hash);
        }
    }

    return result;
}

// 示例
const objWithDate = { a: 1, b: { c: 2 }, d: new Date() };
const clonedObjWithDate = deepCloneRecursive(objWithDate);
console.log(clonedObjWithDate); // { a: 1, b: { c: 2 }, d: Date object }
console.log(clonedObjWithDate.d instanceof Date); // true
console.log(clonedObjWithDate.d.getTime() === objWithDate.d.getTime()); // true

// 3. 使用第三方库 lodash
// 需要先安装 lodash: npm install lodash
const _ = require('lodash');

const objComplex = { a: 1, b: { c: 2 }, d: [3, 4, { e: 5 }] };
const clonedObjComplex = _.cloneDeep(objComplex);
console.log(clonedObjComplex); // { a: 1, b: { c: 2 }, d: [3, 4, { e: 5 }] }
console.log(clonedObjComplex.d[2] === objComplex.d[2]); // false (不同的引用)

解释说明：

• JSON.parse 和 JSON.stringify：这是最简单的深拷贝方法，但它有一些局限性，例如不能处理 function、undefined、Symbol、Date 等特殊类型。
• 递归实现：通过递归遍历对象的所有属性，并创建新的对象和数组来避免引用问题。这种方法可以处理更多类型的对象，包括 Date、RegExp 等。
• 使用第三方库（如 lodash）：lodash 提供了 _.cloneDeep 方法，可以方便地进行深拷贝，支持更多复杂的数据结构。