1. 程式人生 > 實用技巧 >JavaScript中的深拷貝和淺拷貝!

JavaScript中的深拷貝和淺拷貝!

JavaScript中的深拷貝和淺拷貝!

淺拷貝

1.淺拷貝只是拷貝一層,更深層次物件級別的只拷貝引用.{也就是拷貝的是地址!簡而言之就是在新的物件中修改深層次的值也會影響原來的物件!}

        // 2.深拷貝拷貝多層,每一-級別的資料都會拷貝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 23
            }
        };
        var o = {};
        // 淺拷貝!
        // for (var k in obj) {
        //     o[k] = obj[k];
        // }
        // 也是淺拷貝!
        // Object.assign( target, ... sources) es6新增方法可以淺拷貝
      Object.assign(o, obj);
      console.log(o)
      console.log(obj)


深拷貝

   // 2.深拷貝拷貝多層,每一-級別的資料都會拷貝.
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 23
            },
            singer: ['小時姑娘', '東京塔子', '葉裡']
        };
        var o = {};
        // 用遞迴的方法實現物件的深拷貝!
        // 封裝函式
        function deepCopy(newObj, oldObj) {
            for (var k in oldObj) {
                // 判斷我們的屬性值屬於 哪種資料型別!
                // 1 獲取屬性值 oldObj[k]
                var item = oldObj[k];
                // 2 判斷這個值是否是陣列!
                if (item instanceof Array) {
                    newObj[k] = [];
                    deepCopy(newObj[k], item)
                } else if (item instanceof Object) {
                    // 3 判斷這個值是否是物件!
                    newObj[k] = {};
                    deepCopy(newObj[k], item)
                } else {
                    // 4 於屬簡單資料型別!
                    newObj[k] = item;
                }
                

            }
        }
        deepCopy(o, obj);
        console.log(o)
        o.msg.age = 8734823;
        console.log(obj)