源數(shù)據(jù)

class Test {
    constructor() {
        this.a = 1;
        this.b = 2;
    }

    c() {
        console.log('c');
    }
};

Test.prototype.d = 1;
const obj = new Test();
obj.h = obj;

正統(tǒng)深克隆

// 循環(huán)引用的克隆
// 防止遞歸的無限執(zhí)行
// 避免報錯
// 避免內(nèi)存泄漏
const cache = new WeakMap();

function orthDeepClone(value) {
    // 函數(shù)不需要克隆
    // 會進入此判斷并直接返回
    if (typeof value !== 'object' || value === null) return value;
    // 判斷緩存是否存在當前值
    // 有的話返回結果
    // 沒有就繼續(xù)往下執(zhí)行
    if (cache.has(value)) return cache.get(value);

    // 創(chuàng)建數(shù)組或?qū)ο?/span>
    // 可以添加Map等其他對象
    const result = Array.isArray(value) ? [] : {};

    // 設置result的原型為value的原型
    // 如果不設置
    // 當克隆類的時候返回的是普通對象
    Object.setPrototypeOf(result, Object.getPrototypeOf(value));
    // 設置緩存
    cache.set(value, result);
    for (const key in obj) {
        // 不確定數(shù)據(jù)類型時使用
        // if (Object.hasOwnProperty.call(obj, key)) result[key] = orthDeepClone(obj[key]);

        // 確定數(shù)據(jù)類型時使用
        // 只克隆value的自有屬性
        // 原型上的屬性不參與克隆
        if (value.hasOwnProperty(key)) result[key] = orthDeepClone(obj[key]);
    }

    return result;
}

console.log(orthDeepClone(obj));
// Test {a: 1, b: 2, h: Test}

JSON深克隆

function JSONDeepClone(value) {
    return JSON.parse(JSON.stringify(value));
}

console.log(JSONDeepClone(obj));
// 報錯
// Uncaught TypeError: Converting circular structure to JSON

在JavaScript中，對象和數(shù)組是引用類型，當將一個對象或數(shù)組賦值給另一個變量時，它們實際上是共享同一塊內(nèi)存空間。這意味著對一個對象或數(shù)組的修改會影響到所有引用它的變量。
為了創(chuàng)建一個獨立的副本，可以使用深克隆。JSON.stringify()方法將JavaScript對象轉(zhuǎn)換為一個JSON字符串，然后使用 JSON.parse()方法將該字符串解析為一個新的JavaScript對象。通過這種方式，創(chuàng)建了一個完全獨立的副本，對其中一個對象的修改不會影響到另一個對象。
需要注意的是，這種方法僅適用于可以被JSON表示的數(shù)據(jù)類型，例如對象、數(shù)組、字符串、數(shù)字、布爾值和null。它不能復制函數(shù)、正則表達式、Date對象等特殊類型的值。文章來源地址http://www.zghlxwxcb.cn/news/detail-783196.html

到了這里，關于JavaScript之深度克隆、多種實現(xiàn)方式、列舉各種方式的優(yōu)缺點、對象自有屬性、拷貝、復制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！