講清楚js物件深拷貝與淺拷貝

在一般面試中,我們會遇到深拷貝與淺拷貝中,雖然在程式設計中很少用到,但是如果你回答出來了,你可牛逼了!!!

深拷貝

啥叫深拷貝?

說通俗一點.就是兩個物件之間沒有任何關係,看下面的例子,你就明白了.

我們瞭解這幾種就可以了

通過JSON實現的深拷貝

例如:

var obj = {
            name: '石榴姐', age: 24, 
        };
        var obj1=JSON.stringify(obj);
        console.log(obj1);
        obj1.name='小辣椒';
        console.log(obj);
        console.log(obj1);

**注意:**如果該對上方法,在用JSON深拷貝時,會造成方法丟失.

var obj = {
            name: '石榴姐', age: 24, say() {
                console.log('看我丟了嗎???');
            }
        };

        var obj1 = JSON.stringify(obj);
        obj1 = JSON.parse(obj1)
        console.log('obj1:', obj1);
        obj1.name = '小辣椒';
        console.log('obj', obj);
        console.log('obj1', obj1);

通過for-in遍歷迴圈實現

var obj = {
            name: '石榴姐', age: 24, say() {
                console.log('看我丟了嗎???');
            }
        };

        var obj1={};
        for(var attr in obj){
            obj1[attr]=obj[attr]
        }
        console.log('obj1:', obj1);
        obj1.say();
        obj1.name='小芳';
        console.log('obj:', obj);

通過object.assign實現

 var obj = {
            name: '石榴姐', age: 24, say() {
                console.log('看我丟了嗎???');
            }
        };

        var obj1 = {};
        // 將obj合併到obj1上
        Object.assign(obj1, obj);
        console.log('obj1',obj1);
        obj1.age = 66;
        console.log('obj',obj);

通過ES6擴充套件運算子…

 var obj = { name: '五姑娘', age: 22 };
        var obj1 = { ...obj };
        console.log('obj1',obj1);
        obj1.age = 66;
        console.log('obj',obj);

淺拷貝

啥叫淺拷貝?

淺拷貝就是複製的那個物件含有與原來物件相同的值,他們儲存在堆記憶體中,使用同一個地址,改變一個屬性的值,另一個物件屬性的值也會變

   var obj = {
      param1: '深淺拷貝', param2: 123, say() {
        console.log(this.param1);
      }
    };

當使用淺拷貝時,可以直接賦值

var obj1 = obj;
    obj1.param1 = '淺拷貝';
    console.log(obj);
    //會發現obj中的param1同樣也更改了

持續更新中!!!