一、浅拷贝只拷贝一层,更深层次对象级别的只拷贝引用;所以改变新对象的属性值时,会改变原对象。
Object.assign(target,...sources) 是es6新增方法进行浅拷贝;
二、深拷贝拷贝多层,每一级别的数据都会拷贝;所以改变新对象的属性值时,不会改变原对象。
简便方法:JSON.parse(JSON.stringify(obj))
使用JavaScript实现浅拷贝和深拷贝:
被拷贝对象:obj,拷贝对象:o,即:拷贝obj对象,使对象o具备obj对象的属性名与属性值。
一个小知识点:在改变对象 o 的一个属性前 console.log() 输出对象o,发现输出的对象 o 是改变后的值。因为 console.log()输出 对象时,点击控制台的小倒三角 会获取该对象的最新状态。—— 对比:在对象属性值改变前console.log()输出该对象将改变的值仍然是以前的值。(具体参考第一条浅拷贝的代码及输出图)
1、浅拷贝
1)使用循环对象进行拷贝
//浅拷贝
var obj={
id:1,
name:'lee',
msg:{
age:18
},
color:['red','blue']
}
var o={};
console.log('——————————一般浅拷贝——————————')
for(var k in obj){// k:属性名 , obj[k]:属性值
o[k]=obj[k];
}
console.log(o)//点击三角后获取最新数据
console.log(o.msg.age);
o.msg.age=20;
console.log(obj);
输出:
2)使用ES6新增方法 assign() 进行拷贝
//浅拷贝
var obj={
id:1,
name:'lee',
msg:{
age:18
},
color:['red','blue']
}
var o={};
console.log('——————————ES6新增浅拷贝方法——————————')
Object.assign(o,obj);
console.log(o)
o.msg.age=20;
console.log(obj);
输出:
2、深拷贝
使用了递归函数实现深拷贝。
注意:先判断属性值是否属于数组类型,再判断是否属于对象类型,因为Array也属于Object。
var obj={
id:1,
name:'lee',
msg:{
age:18
},
color:['red','blue']
}
var o={};
//深拷贝
console.log('——————————深拷贝——————————')
//封装函数
function deepCopy(newobj,oldobj){
for(var k in oldobj){
//判断属性值是什么数据类型
//获取属性值 oldobj[k]
var item=oldobj[k];
if(item instanceof Array){
//判断是否是数组(先判断,因为数组也属于Object)
newobj[k]=[];
deepCopy(newobj[k],item);
}else if(item instanceof Object){
//判断是否是对象
newobj[k]={};
deepCopy(newobj[k],item);
}else{
//简单数据类型
newobj[k]=item;
}
}
}
deepCopy(o,obj);
console.log(o);
o.msg.age=20;
console.log(obj);
输出: