【深入JS】JavaScript浅拷贝与深拷贝

深浅拷贝是相对于引用类型的:

  • 浅拷贝
  • 深拷贝
  • 参考资料

一、浅拷贝

浅拷贝:父对象和子对象指向同一个内存的数组,改变子对象的数组的时候,父对象竟然也跟着改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var father1 = {name:'shangdi',age:1000,job:['teacher','cook']};
//浅拷贝函数
function copy(obj){
var childs = {};
for(var key in obj){
childs[key] = obj[key];
}
return childs;
}
var child1 = copy(father1);
console.log(child1); //{ name: 'shangdi', age: 1000, job: [ 'teacher', 'cook' ] }
console.log(typeof child1); //object
//改变子对象的name属性,对父对象的name没有影响
child1.name = 'bangbang';
console.log(father1); //{ name: 'shangdi', age: 1000, job: [ 'teacher', 'cook' ] }
console.log(child1); //{ name: 'bangbang', age: 1000, job: [ 'teacher', 'cook' ] }
//注意:这次改变子对象的job属性,也就是改变数组
//对父对象的job竟然有影响
child1.job.push('programer');
console.log(father1); //{ name: 'shangdi',age: 1000,job: [ 'teacher', 'cook', 'programer' ] }
console.log(child1); //{ name: 'shangdi',age: 1000,job: [ 'teacher', 'cook', 'programer' ] }

浅拷贝方法

1
2
3
4
5
6
7
function copy(obj){
var childs = {};
for(var key in obj){
childs[key] = obj[key];
}
return childs;
}

二、深拷贝

深拷贝:父对象拷贝到子对象上,两者的内存和以后的操作互不影响

深拷贝方法

1
2
3
4
// 法一
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 法二
function deepCopy(obj){
var newobj, obj;
if (obj.constructor == Object){
newobj = new obj.constructor();
}else{
newobj = new obj.constructor(obj.valueOf());//valueOf()方法返回 Array 对象的原始值
}
for(var key in obj){
if ( newobj[key] != obj[key] ){
if ( typeof(obj[key]) == 'object' ){
newobj[key] = deepCopy(obj[key]);
}else{
newobj[key] = obj[key];
}
}
}
newobj.toString = obj.toString;
newobj.valueOf = obj.valueOf;
return newobj;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 法三
var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
} else if(window.JSON){
str = JSON.stringify(obj), //系列化对象
newobj = JSON.parse(str); //还原
} else {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 法四
function deepCopy(p,c){
c = c || {};
for (var i in p){
if(p.hasOwnProperty(i)){
if(typeof p[i] === 'object'){
c[i] = Array.isArray(p[i]) ? [] : {};
deepCopy(p[i],c[i]);
}else{
c[i] = p[i];
}
}
}
return c;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 法五
function deepCopy(obj){
var o;
switch(typeof obj){
case 'undefined': break;
case 'string' : o = obj + '';break;
case 'number' : o = obj - 0;break;
case 'boolean' : o = obj;break;
case 'object' :
if(obj === null){
o = null;
}else{
if(obj instanceof Array){
o = [];
for(var i = 0, len = obj.length; i < len; i++){
o.push(deepCopy(obj[i]));
}
}else{
o = {};
for(var k in obj){
o[k] = deepCopy(obj[k]);
}
}
}
break;
default:
o = obj;break;
}
return o;
}

参考资料

您的支持将鼓励我继续创作!
------本文结束感谢阅读------