一、淺拷貝

在JavaScript中，分為簡單資料型別（數字、字符等）和復雜資料型別（物件、陣列等），一般簡單資料型別被存盤在堆疊記憶體；而復雜資料型別存盤在堆記憶體，其地址存盤在堆疊記憶體里面，
所以一般將復雜資料型別賦值給其他變數的時候，一般是將其地址復制，如果對賦值后的資料進行操作，很容易改變原本的復雜資料型別，

我們舉個例子，首先定義一個物件，里面有兩個簡單資料型別和另一個物件

        var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18 // 將地址拷貝
            }
        };

        var o = {};
        for (var k in obj) {
            // k是屬性名
            o[k] = obj[k];
        }
        console.log(o);
        o.msg.age = 20;
        console.log(o);
        console.log(obj);

我們先列印物件o，發現賦值完成：
在這里插入圖片描述
接下來我們僅改變物件o里面age的屬性，觀察兩個物件的age屬性，

我們明明只改變了o的age，為什么obj的也會隨著改變呢？這是因為在淺拷貝的情況下，里面復雜資料型別的賦值是地址的值傳遞，修改一個物件的同時，另一個物件也會改變，下面這張圖可以更直觀的理解，
在這里插入圖片描述
js（es6）也為我們提供了淺拷貝的語法糖，同樣可以實作淺拷貝，語法如下：
Object.assign(target, …sources)

		Object.assign(o, obj);
        o.msg.age = 20;
        console.log(o);
        console.log(obj);

二、深拷貝

深拷貝很簡單理解了，就是將賦值后的每一個變數都單獨指向，與原先的資料脫離，不再公用變數，
下圖有助你的理解：
在這里插入圖片描述
原生JS遞回實作深拷貝：

        var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18
            },
            color: ['red', 'pink']

        };

        var o = {};

        // 遞回實作深拷貝
        function deepCopy(newObj, oldObj) {
            for (var key in oldObj) {
                // 判斷資料型別
                item = oldObj[key];
                if (item instanceof Array) {
                    newObj[key] = [];
                    deepCopy(newObj[key], item);
                } else if (item instanceof Object) {
                    newObj[key] = {};
                    deepCopy(newObj[key], item);
                } else {
                    newObj[key] = item;
                }
            }
        }
        deepCopy(o, obj);
        o.msg.age = 19;
        console.log(o);
        console.log(obj);

在這里插入圖片描述
可以看到修改一個物件的值，另一個物件不受影響，

下一篇：JavaScript高級—（8）正則運算式

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302806.html

標籤：其他

上一篇：關于鍵盤事件

下一篇：ES6總結上

JavaScript高級---（7）淺拷貝與深拷貝

一、淺拷貝

二、深拷貝