目錄

• 1、淺複製的意思
• 2、深複製的意思
• 3、使用深複製的原由
• 4、可實現深複製的幾種方法
• 實現方式一：ON的序列化與反序列化
• 實現方式二：Object.assign()
• 實現方式三：擴充套件運算子
• 實現方式四http://www.cppcns.com：使用遞迴
• 5、ladash深拷貝

1、淺複製的意思

淺複製是僅僅對資料存放在棧內的引用的複製，沒有複製引用指向堆內的內容。多個數據的淺複製，這複製多個引用，這多個引用共同指向堆內的同一個內容。當一個淺複製資料做出修改，即堆內的引用指向的內容發生修改，這時，其他通過引用指向這裡的資料也會隨著改變。

let obj = {
    a:1,b:2,c:{
        c1:10,c2:20
    }
}

let objA = obj;
objA.a = 'a';

console.log(obj.a);  // 'a'
console.log(objA.a);  // 'a'

2、深複製的意思

深複製是指連同堆的內容一塊複製，生成一個新的物件。多個深複製將是多個不同的物件，也就有不同的引用，也就指向不同的堆內容。

3、使用深複製的原由

在平常開發中，有時會有資料的傳遞與接收，當拿到傳過來的資料後，難免需要對資料進行加工和改造，為了不破壞原有資料結構，這時就可以使用深複製拷貝資料，然後處理生成的新的資料。深複製也可以防止修改多個引用後引用混亂的問題，減少BUG的產生機會。

4、可實現深複製的幾種方法

實現方式一：JSON的序列化與反序列化

let obj = {
    a:1,c2:20
    }
}

let objA = JSON.parse(JSON.stringify(obj));//JSON的序列化與反序列化
objA.a = 'a';

console.log(obj.a);  // 1
console.log(objA.a);  // 'a'

雖然JSON的序列化與反序列化可以實現深複製，但有幾個缺點需要注意：

• date日期物件被轉成日期日期字串
• 沒法訪問到原型
• 複製不了undefined的屬性
• NAN和無窮被轉為NULL

let d1 = new Date();
let obj = {
    d1,d2: undefined,d3:NaN
}
let objD = JSON.parse(JSON.stringify(obj));
console.log(obj) 
console.log(objD)

實現方式二：Object.assign()

let obj = {
    a:1,c2:20
    }
}

let objA = Object.assign(obj);
objA.a = 'a';

console.log(obj.a);  // 1
console.log(objA.a);  // 'a'

雖然Object.assign()可以實現深複製，但對於更深層次的物件引用也是僅僅淺複製。

let obj = {
    a:1,c2:20
    }
}

let objA = Object.assign(obj);
objA.c.c1 = 'c1'; //Object.assign()僅僅是一層深複製。

console.log(obj.c.c1);  // 'c1'
console.log(objA.c.c1);  // 'c1'

實現方式三：擴充套件運算子

let obj = {
    a:1,c2:20
    }
}

let objA = {...obj};;
objA.a = 'a';

console.log(obj.a);  // 1
console.log(objA.a);  // 'a'

雖然擴充套件運算子" … "可以實現深複製，但對於更深層次的物件引用也是僅僅淺複製。

let obj = {
    a:1,c2:20
    }
}

let objA = {...obj};
objA.c.c1 = 'c1'http://www.cppcns.com; //擴充套件運算子"..."同Object.assign()一樣，僅僅是一層深複製，不能多層深複製。

console.log(obj.c.c1);  // 'c1'
console.log(objA.c.c1);  // 'c1'

實現方式四：使用遞迴

想要實現深複製，且實現多層深複製則可以使用遞迴迴圈複製。

let obj = {
    a:1,c2:20
    }
}

const ReCopy = function (paramter) {
        let target = null;
        let isObject = paramter.constructor === Object;
        let isArray = paramter.constructor === Array;
        if (isObject || isArray) {
            target = Array.isArray(paramter) ? [] : {};
            for (let i in paramter) {
                target[i] = ReCopy(paramter[i]);
            }
        } else {
            target = paramter;
        }
        return target;
    }

let objA = ReCopy(obj);
objA.c.c1 = 'c1';

console.log(obj.c.c1);  // 10
console.log(objA.c.c1);  // 'c1'

5、ladash深拷貝

lodash深複製是更專業的深複製方式。

安裝lodash

先初始化，生成package.json檔案，然後使用一aCciGRa下命令安裝。

npm i -S lodash

引入lodash

var _ = require('lodash');

使用lodash

let obj = {
    a:1,c2:20
    }
}

let objA = _.cloneDeep(obj);
objA.c.c1 = 'c1'; 

console.log(obj.c.c1);  // 10
console.log(objA.c.c1);  // 'c1'

到此這篇關於JS的深淺複製詳細的文章就介紹到這了,更多相關JS的深淺複製內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！