低門檻徹底理解 JavaScript 中的深拷貝和淺拷貝

發表於2018-05-08

在說深拷貝與淺拷貝前，我們先看兩個簡單的案例：

//案例1
var num1 = 1, num2 = num1;
console.log(num1) //1
console.log(num2) //1

num2 = 2; //修改num2
console.log(num1) //1
console.log(num2) //2

//案例2
var obj1 = {x: 1, y: 2}, obj2 = obj1;
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 1, y: 2}

obj2.x = 2; //修改obj2.x
console.log(obj1) //{x: 2, y: 2}
console.log(obj2) //{x: 2, y: 2}

//案例1

var num1 = 1, num2 = num1;

console.log(num1) //1

console.log(num2) //1

num2 = 2; //修改num2

console.log(num1) //1

console.log(num2) //2

//案例2

var obj1 = {x: 1, y: 2}, obj2 = obj1;

console.log(obj1) //{x: 1, y: 2}

console.log(obj2) //{x: 1, y: 2}

obj2.x = 2; //修改obj2.x

console.log(obj1) //{x: 2, y: 2}

console.log(obj2) //{x: 2, y: 2}

按照常規思維，obj1應該和num1一樣，不會因為另外一個值的改變而改變，而這裡的obj1 卻隨著obj2的改變而改變了。同樣是變數，為什麼表現不一樣呢？這就要引入JS中基本型別和引用型別的概念了。

基本型別和引用型別

ECMAScript變數可能包含兩種不同資料型別的值：基本型別值和引用型別值。基本型別值指的是那些儲存在棧記憶體中的簡單資料段，即這種值完全儲存在記憶體中的一個位置。而引用型別值是指那些儲存堆記憶體中的物件，意思是變數中儲存的實際上只是一個指標，這個指標指向記憶體中的另一個位置，該位置儲存物件。

打個比方，基本型別和引用型別在賦值上的區別可以按“連鎖店”和“單店”來理解：基本型別賦值等於在一個新的地方安裝連鎖店的規範標準新開一個分店，新開的店與其他舊店互不相關，各自運營；而引用型別賦值相當於一個店有兩把鑰匙，交給兩個老闆同時管理，兩個老闆的行為都有可能對一間店的運營造成影響。

上面清晰明瞭的介紹了基本型別和引用型別的定義和區別。目前基本型別有：Boolean、Null、Undefined、Number、String、Symbol，引用型別有：Object、Array、Function。之所以說“目前”，因為Symbol就是ES6才出來的，之後也可能會有新的型別出來。

再回到前面的案例，案例1中的值為基本型別，案例2中的值為引用型別。案例2中的賦值就是典型的淺拷貝，並且深拷貝與淺拷貝的概念只存在於引用型別。

深拷貝與淺拷貝

既然已經知道了深拷貝與淺拷貝的來由，那麼該如何實現深拷貝？我們先分別看看Array和Object自有方法是否支援：

Array

var arr1 = [1, 2], arr2 = arr1.slice();
console.log(arr1); //[1, 2]
console.log(arr2); //[1, 2]

arr2[0] = 3; //修改arr2
console.log(arr1); //[1, 2]
console.log(arr2); //[3, 2]

var arr1 = [1, 2], arr2 = arr1.slice();

console.log(arr1); //[1, 2]

console.log(arr2); //[1, 2]

arr2[0] = 3; //修改arr2

console.log(arr1); //[1, 2]

console.log(arr2); //[3, 2]

此時，arr2的修改並沒有影響到arr1，看來深拷貝的實現並沒有那麼難嘛。我們把arr1改成二維陣列再來看看：

var arr1 = [1, 2, [3, 4]], arr2 = arr1.slice();
console.log(arr1); //[1, 2, [3, 4]]
console.log(arr2); //[1, 2, [3, 4]]

arr2[2][1] = 5; 
console.log(arr1); //[1, 2, [3, 5]]
console.log(arr2); //[1, 2, [3, 5]]

var arr1 = [1, 2, [3, 4]], arr2 = arr1.slice();

console.log(arr1); //[1, 2, [3, 4]]

console.log(arr2); //[1, 2, [3, 4]]

arr2[2][1] = 5;

console.log(arr1); //[1, 2, [3, 5]]

console.log(arr2); //[1, 2, [3, 5]]

咦，arr2又改變了arr1，看來slice()只能實現一維陣列的深拷貝。

具備同等特性的還有：concat、Array.from() 。

Object

Object.assign()

var obj1 = {x: 1, y: 2}, obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 1, y: 2}

obj2.x = 2; //修改obj2.x
console.log(obj1) //{x: 1, y: 2}
console.log(obj2) //{x: 2, y: 2}

var obj1 = {x: 1, y: 2}, obj2 = Object.assign({}, obj1);

console.log(obj1) //{x: 1, y: 2}

console.log(obj2) //{x: 1, y: 2}

obj2.x = 2; //修改obj2.x

console.log(obj1) //{x: 1, y: 2}

console.log(obj2) //{x: 2, y: 2}

var obj1 = {
    x: 1, 
    y: {
        m: 1
    }
};
var obj2 = Object.assign({}, obj1);
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 1, y: {m: 1}}

obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 2}}
console.log(obj2) //{x: 2, y: {m: 2}}

var obj1 = {

x: 1,

y: {

m: 1

}

};

var obj2 = Object.assign({}, obj1);

console.log(obj1) //{x: 1, y: {m: 1}}

console.log(obj2) //{x: 1, y: {m: 1}}

obj2.y.m = 2; //修改obj2.y.m

console.log(obj1) //{x: 1, y: {m: 2}}

console.log(obj2) //{x: 2, y: {m: 2}}

經測試，Object.assign()也只能實現一維物件的深拷貝。

JSON.parse(JSON.stringify(obj))

var obj1 = {
    x: 1, 
    y: {
        m: 1
    }
};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 1, y: {m: 1}}

obj2.y.m = 2; //修改obj2.y.m
console.log(obj1) //{x: 1, y: {m: 1}}
console.log(obj2) //{x: 2, y: {m: 2}}

var obj1 = {

x: 1,

y: {

m: 1

}

};

var obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj1) //{x: 1, y: {m: 1}}

console.log(obj2) //{x: 1, y: {m: 1}}

obj2.y.m = 2; //修改obj2.y.m

console.log(obj1) //{x: 1, y: {m: 1}}

console.log(obj2) //{x: 2, y: {m: 2}}

JSON.parse(JSON.stringify(obj)) 看起來很不錯，不過MDN文件的描述有句話寫的很清楚：

undefined、任意的函式以及 symbol 值，在序列化過程中會被忽略（出現在非陣列物件的屬性值中時）或者被轉換成 null（出現在陣列中時）。

我們再來把obj1改造下：

var obj1 = {
    x: 1,
    y: undefined,
    z: function add(z1, z2) {
        return z1 + z2
    },
    a: Symbol("foo")
};
var obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1) //{x: 1, y: undefined, z: ƒ, a: Symbol(foo)}
console.log(JSON.stringify(obj1)); //{"x":1}
console.log(obj2) //{x: 1}

var obj1 = {

x: 1,

y: undefined,

z: function add(z1, z2) {

return z1 + z2

a: Symbol("foo")

};

var obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj1) //{x: 1, y: undefined, z: ƒ, a: Symbol(foo)}

console.log(JSON.stringify(obj1)); //{"x":1}

console.log(obj2) //{x: 1}

發現，在將obj1進行JSON.stringify()序列化的過程中，y、z、a都被忽略了，也就驗證了MDN文件的描述。既然這樣，那JSON.parse(JSON.stringify(obj))的使用也是有侷限性的，不能深拷貝含有undefined、function、symbol值的物件，不過JSON.parse(JSON.stringify(obj))簡單粗暴，已經滿足90%的使用場景了。

經過驗證，我們發現JS 提供的自有方法並不能徹底解決Array、Object的深拷貝問題。只能祭出大殺器：遞迴

function deepCopy(obj) {
    // 建立一個新物件
    let result = {}
    let keys = Object.keys(obj),
        key = null,
        temp = null;

    for (let i = 0; i < keys.length; i++) {
        key = keys[i];    
        temp = obj[key];
        // 如果欄位的值也是一個物件則遞迴操作
        if (temp && typeof temp === 'object') {
            result[key] = deepCopy(temp);
        } else {
        // 否則直接賦值給新物件
            result[key] = temp;
        }
    }
    return result;
}

var obj1 = {
    x: {
        m: 1
    },
    y: undefined,
    z: function add(z1, z2) {
        return z1 + z2
    },
    a: Symbol("foo")
};

var obj2 = deepCopy(obj1);
obj2.x.m = 2;

console.log(obj1); //{x: {m: 1}, y: undefined, z: ƒ, a: Symbol(foo)}
console.log(obj2); //{x: {m: 2}, y: undefined, z: ƒ, a: Symbol(foo)}

function deepCopy(obj) {

// 建立一個新物件

let result = {}

let keys = Object.keys(obj),

key = null,

temp = null;

for (let i = 0; i < keys.length; i++) {

key = keys[i];

temp = obj[key];

// 如果欄位的值也是一個物件則遞迴操作

if (temp && typeof temp === 'object') {

result[key] = deepCopy(temp);

} else {

// 否則直接賦值給新物件

result[key] = temp;

}

return result;

}

var obj1 = {

x: {

m: 1

y: undefined,

z: function add(z1, z2) {

return z1 + z2

a: Symbol("foo")

};

var obj2 = deepCopy(obj1);

obj2.x.m = 2;

console.log(obj1); //{x: {m: 1}, y: undefined, z: ƒ, a: Symbol(foo)}

console.log(obj2); //{x: {m: 2}, y: undefined, z: ƒ, a: Symbol(foo)}

可以看到，遞迴完美的解決了前面遺留的所有問題，我們也可以用第三方庫：jquery的$.extend和lodash的_.cloneDeep來解決深拷貝。上面雖然是用Object驗證，但對於Array也同樣適用，因為Array也是特殊的Object。

到這裡，深拷貝問題基本可以告一段落了。但是，還有一個非常特殊的場景：

迴圈引用拷貝

var obj1 = {
    x: 1, 
    y: 2
};
obj1.z = obj1;

var obj2 = deepCopy(obj1);

var obj1 = {

x: 1,

y: 2

};

obj1.z = obj1;

var obj2 = deepCopy(obj1);

此時如果呼叫剛才的deepCopy函式的話，會陷入一個迴圈的遞迴過程，從而導致爆棧。jquery的$.extend也沒有解決。解決這個問題也非常簡單，只需要判斷一個物件的欄位是否引用了這個物件或這個物件的任意父級即可，修改一下程式碼：

function deepCopy(obj, parent = null) {
    // 建立一個新物件
    let result = {};
    let keys = Object.keys(obj),
        key = null,
        temp= null,
        _parent = parent;
    // 該欄位有父級則需要追溯該欄位的父級
    while (_parent) {
        // 如果該欄位引用了它的父級則為迴圈引用
        if (_parent.originalParent === obj) {
            // 迴圈引用直接返回同級的新物件
            return _parent.currentParent;
        }
        _parent = _parent.parent;
    }
    for (let i = 0; i < keys.length; i++) {
        key = keys[i];
        temp= obj[key];
        // 如果欄位的值也是一個物件
        if (temp && typeof temp=== 'object') {
            // 遞迴執行深拷貝 將同級的待拷貝物件與新物件傳遞給 parent 方便追溯迴圈引用
            result[key] = DeepCopy(temp, {
                originalParent: obj,
                currentParent: result,
                parent: parent
            });

        } else {
            result[key] = temp;
        }
    }
    return result;
}

var obj1 = {
    x: 1, 
    y: 2
};
obj1.z = obj1;

var obj2 = deepCopy(obj1);
console.log(obj1); //太長了去瀏覽器試一下吧～ 
console.log(obj2); //太長了去瀏覽器試一下吧～

function deepCopy(obj, parent = null) {

// 建立一個新物件

let result = {};

let keys = Object.keys(obj),

key = null,

temp= null,

_parent = parent;

// 該欄位有父級則需要追溯該欄位的父級

while (_parent) {

// 如果該欄位引用了它的父級則為迴圈引用

if (_parent.originalParent === obj) {

// 迴圈引用直接返回同級的新物件

return _parent.currentParent;

}

_parent = _parent.parent;

}

for (let i = 0; i < keys.length; i++) {

key = keys[i];

temp= obj[key];

// 如果欄位的值也是一個物件

if (temp && typeof temp=== 'object') {

// 遞迴執行深拷貝將同級的待拷貝物件與新物件傳遞給 parent 方便追溯迴圈引用

result[key] = DeepCopy(temp, {

originalParent: obj,

currentParent: result,

parent: parent

});

} else {

result[key] = temp;

}

return result;

}

var obj1 = {

x: 1,

y: 2

};

obj1.z = obj1;

var obj2 = deepCopy(obj1);

console.log(obj1); //太長了去瀏覽器試一下吧～

console.log(obj2); //太長了去瀏覽器試一下吧～

至此，已完成一個支援迴圈引用的深拷貝函式。當然，也可以使用lodash的_.cloneDeep噢～。

低門檻徹底理解JavaScript中的深拷貝和淺拷貝
2018-04-17
JavaScript
5張圖徹底理解Python中的淺拷貝與深拷貝
2019-02-17
Python
JavaScript深拷貝和淺拷貝
2019-01-23
JavaScript
JavaScript淺拷貝和深拷貝
2020-12-30
JavaScript
JavaScript之深拷貝和淺拷貝
2018-11-15
JavaScript
對淺拷貝和深拷貝的理解
2018-08-15
JavaScript中的淺拷貝與深拷貝
2020-01-15
JavaScript
javascript 淺拷貝VS深拷貝
2018-08-11
JavaScript
理解JS中的淺拷貝與深拷貝
2019-10-12
JS
淺拷貝和深拷貝
2020-11-02
深拷貝和淺拷貝
2020-03-26
VUE 中的深拷貝和淺拷貝
2019-03-12
Vue
javaScript深拷貝和淺拷貝簡單梳理
2022-04-26
JavaScript
Javascript知識點：淺拷貝和深拷貝
2022-04-29
JavaScript
【JavaScript】物件的淺拷貝與深拷貝
2018-07-29
JavaScript物件
淺談Java中的淺拷貝和深拷貝
2019-03-19
Java
Java深拷貝和淺拷貝
2019-03-25
Java
物件深拷貝和淺拷貝
2019-03-04
物件
js 淺拷貝和深拷貝
2018-07-18
JS
iOS深拷貝和淺拷貝
2019-10-09
iOS
js 深拷貝和淺拷貝
2022-03-30
JS
js的深拷貝和淺拷貝
2018-12-28
JS
淺拷貝&深拷貝
2018-10-17
python 指標拷貝，淺拷貝和深拷貝
2020-03-09
Python指標
談談我對深拷貝和淺拷貝的理解
2018-04-19
淺拷貝與深拷貝程式碼(javascript)
2020-09-30
JavaScript
JavaScript物件的深拷貝以及淺拷貝分析
2018-12-13
JavaScript物件
JavaScript深淺拷貝
2018-05-20
JavaScript
淺探js深拷貝和淺拷貝
2018-11-15
JS
ECMAScript-淺拷貝和深拷貝
2020-10-23
C++淺拷貝和深拷貝
2020-04-06
C++
聊聊物件深拷貝和淺拷貝
2018-12-29
物件
go slice深拷貝和淺拷貝
2021-07-18
Go
js之淺拷貝和深拷貝
2021-10-10
JS
深度解析深拷貝和淺拷貝
2021-01-02
java深克隆（深拷貝）和淺克隆（淺拷貝）
2018-12-21
Java
淺拷貝與深拷貝
2018-12-19
一篇文章徹底說清JS的深拷貝/淺拷貝
2018-12-19
JS

低門檻徹底理解 JavaScript 中的深拷貝和淺拷貝

基本型別和引用型別

深拷貝與淺拷貝

Array

Object

Object.assign()

JSON.parse(JSON.stringify(obj))

相關文章