javascript中淺拷貝和深拷貝的理解

javascript中淺拷貝和深拷貝的理解

什麼是拷貝？

簡單地說就是複製，對數據的複製

淺拷貝：改變拷貝者的值，被拷貝者的值也會變化

深拷貝：改變拷貝者的值，被拷貝者的值不會變化

因爲基本數據類型是存放在棧中，拷貝的就是本身自己，因此就是深拷貝

1：number

var a = 1;
b = a;
console.log(a);//1
console.log(b);//1
b = 2;
console.log(a);//1
console.log(b);//2

2:string

var a = "hello";
b = a;
console.log(a);//hello
console.log(b);//hello
b = "world";
console.log(a);//hello
console.log(b);//world

3:boolean

var a = true;
b = a;
console.log(a);//true
console.log(b);//true
b = false;
console.log(a);//true
console.log(b);//false

4:null

var a = null;
b = a;
console.log(a);//null
console.log(b);//null
b = "hello";
console.log(a);//null
console.log(b);//hello

5:undefined

var a = undefined;
b = a;
console.log(a);//undefined
console.log(b);//undefined
b = "hello";
console.log(a);//undefined
console.log(b);//hello

對於引用數據類型，經過複製的形式通常就是淺拷貝

6：Array淺拷貝

複製的只是引用，a和b在棧中是不一樣的值，但兩者在堆中是同一塊區域

var a = [1,2,3];
b = a;
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,4,3]
console.log(b);//[1,4,3]

7：Array深拷貝

複製的不只是引用，還有引用值，堆中也未b開闢了一塊空間

8：Array深拷貝slice(0)

var a = [1,2,3];
b = a.slice(0);
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,2,3]
console.log(b);//[1,4,3]

9：Array深拷貝concat()

var a = [1,2,3];
b = a.concat();
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,2,3]
console.log(b);//[1,4,3]

10：Array深拷貝deepCopy()

var a = [1,2,3];
b = [];
deepCopy(a,b)
console.log(a);//[1,2,3]
console.log(b);//[1,2,3]
b[1] = 4;
console.log(a);//[1,2,3]
console.log(b);//[1,4,3]

function deepCopy(arr1,arr2){
    for(var i = 0,L = arr1.length;i<L;i++){
        arr2[i] = arr1[i]
    }
}

11：上面三種方法只針對一位數組，對於多維數組有侷限性

12：Array多維數組深拷貝deepCopy()

var a = [[1,2,3,4],5,6];
b = [];
deepCopy(a,b)
console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ]
b[0][1] = 7;
b[1] = 8;
console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

function deepCopy(arr1,arr2){
    for(var i = 0,L = arr1.length;i<L;i++){
        arr2[i] = arr1[i]
    }
}

13：Array多維數組深拷貝slice(0)

var a = [[1,2,3,4],5,6];
b = a.slice(0)
console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ]
b[0][1] = 7;
b[1] = 8;
console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

14：Array多維數組深拷貝concat()

var a = [[1,2,3,4],5,6];
b = a.concat()
console.log(a);//[ [ 1, 2, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, 4 ], 5, 6 ]
b[0][1] = 7;
b[1] = 8;
console.log(a);//[ [ 1, 7, 3, 4 ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, 4 ], 8, 6 ]

15：Array多維數組深拷貝deepCopy()優化處理

var a = [[1,2,3,[7,8]],5,6];
b = [];
deepCopy(a,b)
console.log(a);//[ [ 1, 2, 3, [ 7, 8 ] ], 5, 6 ]
console.log(b);//[ [ 1, 2, 3, [ 7, 8 ] ], 5, 6 ]
b[0][1] = 7;
b[0][3][1] = 9;
b[1] = 8;
console.log(a);//[ [ 1, 2, 3, [ 7, 8 ] ], 5, 6 ]
console.log(b);//[ [ 1, 7, 3, [ 7, 9 ] ], 8, 6 ]

function deepCopy(arr1,arr2){
    var tempArr = [];
    for(var i = 0,L = arr1.length;i<L;i++){
        if(arr1[i] instanceof Array){
            deepCopy(arr1[i],tempArr);
            arr2[i] = tempArr
        }else {
            arr2[i] = arr1[i];
        }
    }
}

16:對象淺拷貝

var a = {name:"zyb",age:23};
var b = a;
console.log(a)//{ name: 'zyb', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

a.name = "lisi";
console.log(a)//{ name: 'lisi', age: 23 }
console.log(b);//{ name: 'lisi', age: 23 }

17：對象深拷貝

var a = {name:"zyb",age:23};
var b = new Object();

b.name = a.name;
b.age = a.age;
console.log(a)//{ name: 'zyb', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

a.name = "lisi";
console.log(a)//{ name: 'lisi', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

18：對象深拷貝：內嵌對象

var a = {name:"zyb",age:23,list:{
    goods:"籃球",
    detail:"運動是好的"
}};
var b = new Object();

b.name = a.name;
b.age = a.age;
b.list = a.list;
console.log(a)//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }

a.name = "lisi";
a.list.goods = "足球";
console.log(a)//{ name: 'lisi', age: 23, list: { goods: '足球', detail: '運動是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '足球', detail: '運動是好的' } }

19：對象深拷貝deepCopy()

var a = {name:"zyb",age:23};
var b = deepCopy(a);

console.log(a)//{ name: 'zyb', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

a.name = "lisi";

console.log(a)//{ name: 'lisi', age: 23 }
console.log(b);//{ name: 'zyb', age: 23 }

function deepCopy(obj){
    var result = {};
    for(var key in obj){
        if(obj.hasOwnProperty(key)){
            result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return result;
}

20：對象深拷貝deepCopy()：內嵌對象

var a = {name:"zyb",age:23,list:{
    goods:"籃球",
    detail:"運動是好的"
}};
var b = deepCopy(a)

console.log(a)//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }

a.name = "lisi";
a.list.goods = "足球";
console.log(a)//{ name: 'lisi', age: 23, list: { goods: '足球', detail: '運動是好的' } }
console.log(b);//{ name: 'zyb', age: 23, list: { goods: '籃球', detail: '運動是好的' } }

function deepCopy(obj){
    var result = {};
    for(var key in obj){
        if(obj.hasOwnProperty(key)){
            result[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return result;
}

21:jquery中對數組的拷貝

var a = [1,2,3];
var b = $.extend([],a);
console.log(a)//[1,2,3]
console.log(b)//[1,2,3]
b.push(4)
console.log(a)//[1,2,3]
console.log(b)//[1,2,3,4]

22:jquery中對對象的拷貝1

var a = {a1:1,a2:2,a3:3};
var b = $.extend({},a);
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3}
b.b4 = 4
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3,b4:4}

23:jquery中對對象的拷貝2

var a = {a1:1,a2:2,a3:3};
var b = $.extend({b0:0},a);
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{b0:0,a1:1,a2:2,a3:3}
b.b4 = 4
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{b0:0,a1:1,a2:2,a3:3,b4:4}

24:jquery中對對象的拷貝3

var a = {a1:1,a2:2,a3:3};
var c = {c1:1,c2:2,c3:3};
var b = $.extend({b0:0},a,c);
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3,b0:0,c1:1,c2:2,c3:3}
b.b4 = 4
console.log(a)//{a1:1,a2:2,a3:3}
console.log(b)//{a1:1,a2:2,a3:3,b0:0.b4:4,c1:1,c2:2,c3:3}