实现js对象浅拷贝
实现浅拷贝的第一种方法
//实现浅拷贝第一种方法
function shallowCopy(obj) {
var newobj = {};
for(var key in obj){
newobj[key] = obj[key];
}
return newobj;
}
var obj = {
a:"hello",
b:{
a:"world",
b:21
},
c:[1,2,3],
d:function(){
alert("d");
},
e:null,
f:undefined
}
var newobj = shallowCopy(obj);
console.log(newobj.a); //hello
console.log(newobj.b); //{a: "world", b: 21}
console.log(newobj.c); //[1, 2, 3]
console.log(newobj.d); //f(){alert("d");}
//更改拷贝对象中的a,b,c,d,看看被拷贝的对象是否变化
newobj.a = "changed";
newobj.b.a = "changed";
newobj.b.b = "22";
newobj.c = [4,5,6];
newobj.d = function(){alert("change")};
console.log(obj.a); //hello
//这里需要注意!newobj和obj的b在浅拷贝时如果数据类型是引用类型,则在堆中是共用同一内存,互相影响
console.log(obj.b); //{a: "changed", b: "22"}
console.log(obj.c); //[1, 2, 3]
console.log(obj.d); //f(){alert("d");}
可以看出浅拷贝是拷贝了一层,深层次的对象级别的就拷贝其引用类型,意思就是浅拷贝就是拷贝了一层,当被拷贝对象中如果数据类型是基本数据类型,那么就如同直接赋值,它们在栈中有自己的内存空间,所以当改变newobj的基本数据类型的值时,因为在栈中指向的内存地址不同,原始对象obj对应的基本数据类型的值不会被影响。
但是如果原始对象中还存在对象,即引用类型,对于浅拷贝来说就只能拷贝其引用类型,newobj中的引用类型和原始对象obj的在堆中还是共用同一个内存,互相影响。
实现浅拷贝的第二种方法
ES6中的Object.assign方法,Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
Object.assign(target, …sources)
参数:
target:目标对象。
sources:任意多个源对象。
返回值:目标对象会被返回。
//实现浅拷贝第二种方法
var obj1 = {
a:"hello",
b:{
a:"world",
b:23
}
};
// target:目标对象。
// sources:任意多个源对象。
// 返回值:目标对象会被返回。
var newobj1 = Object.assign({},obj1);
newobj1.a = "changed";
newobj1.b.a = "changed1";
newobj1.b.b = 24;
console.log(obj1.a); //hello
//针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。
//假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
console.log(obj1.b.a); //changed1
console.log(obj1.b.b); //24
这里可以看出使用Object.assign(),当原始对象中的属性时一个对象的引用,那么obj1和newobj1的这个引用类型在堆中也是指向同一内存地址,互相影响。
实现浅拷贝的第三种方法
使用JSON.parse(JSON.tostringfiy())
JOSN.parse()方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。
JSON.stringfiy()方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串
//实现浅拷贝第三种方法
var obj2 = {
a:'a',
b:{
a:"a1",
b:123
},
c:function(){alert("c");}
}
var newobj2 = JSON.parse(JSON.stringify(obj2));
newobj2.a = "changed";
newobj2.b.a = "changed1";
console.log(obj2.a); //a
console.log(obj2.b.a); //a1
//发现newobj2少了c属性,忽略function和undefined的字段
console.log(newobj2); //{a:"changed",b:{a:"changed1",b:123}}
这种方式还是有局限性的,对象的属性必须是标准格式的JSON数据。
这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。RegExp对象,函数,undefined是无法通过这种方式浅拷贝。所以这个方法只能用在单纯只有数据的对象。