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}