你会不会在开发项目的过程中遇到这样的问题，经常会拿到一个数据后需要拷贝一份副本出来，而且很多前端框架都是拷贝的，针对以上的问题小猿圈讲师分享给大家JavaScript深拷贝和浅拷贝，希望对于学习中的你，有一定的帮助。
涉及到了JS中对数据的深浅拷贝问题，所谓深浅拷贝，浅拷贝的意思就是，你只是复制了对象数据的引用，并没有把内存里的值另外复制一份，那么深拷贝就是把值完整地复制一份新的值。操作拷贝之后的数据不会影响到原数据的值拷贝，就是深拷贝，反正，有影响则为浅拷贝。
一、应用场景
日常开发中，JS拷贝大多会在数据保存，数据比对，数据同步时出现，所以，当你在这些场景的时候，要记得里面隐藏有一个数据深浅拷贝的问题。
二、浅拷贝
functionclone(origin){
varresult={};
for(varpropinorigin){
if(origin.hasOwnProperty(prop)){
result[prop]=origin[prop];
}
}
returnresult;
}
varjay={
name:"jayChou",
age:40,
family:{
wife:"Quinlivan"
}
}
varotherJay=clone(jay);
otherJay.age=18;
otherJay.family.wife="otherGirl";
console.log(jay);
//
//{
//name:"jayChou",
//age:40,//没被改变
//family:{
//wife:"otherGirl"//同时被改变，说明是同一个引用
//}
//}
console.log(otherJay);
//
//{
//name:"jayChou",
//age:18,
//family:{
//wife:"otherGirl"//被改变了
//}
//}
我们发现，首先，浅拷贝不是直接赋值，浅拷贝新建了一个对象，然后将源对象的属性都一一复制过来,复制的是值，而不是引用。
我们知道，对象都是按地址引用进行访问的，浅拷贝的复制只复制了第一层的属性，并没有递归将所有的值复制过来，所以，操作拷贝数据，对原数据产生了影响，故而为浅拷贝。进而，那些可以直接返回原数组的方法就可以简单实现数组和对象浅拷贝。
//1、数组浅拷贝-slice
functionshallowCopy1(origin){
returnorigin.slice();
}
//2、数组浅拷贝-concat
functionshallowCopy2(origin){
returnorigin.concat();
}
//3、数组浅拷贝-遍历
functionshallowCopy3(origin){
varresult=[];
for(vari=0;i<origin.length;i++){
result.push(origin[i]);
}
returnresult;
}
//4、对象浅拷贝-Object.assign
functionshallowCopy4(origin){
returnObject.assign({},origin)
}
//5、对象浅拷贝-扩展运算符
//扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中
functionshallowCopy5(origin){
return{
...origin
}
}
Object.assign的拷贝，假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。MDN有相应的实例和解释。
三、深拷贝
深拷贝就完整复制数据的值（而非引用），目的在于避免拷贝后数据对原数据产生影响。
//1.深拷贝-JSON正反序列化
//缺点就是无法拷贝undefined、function、symbol这类特殊的属性值。
functiondeepClone1(origin){
returnJSON.parse(JSON.stringify(arr));
}
//2.深拷贝-递归;
functiondeepClone2(origin){
constresult=origin.constructor===Array?[]:{};
for(letkeysinorigin){
//不遍历原型链上的属性
if(origin.hasOwnProperty(keys)){
if(origin[keys]&&typeoforigin[keys]==="object"){
//如果值是对象，就递归一下,区分是一般对象还是数组对象
result[keys]=origin[keys].constructor===Array?[]:{};
//如果是引用数据类型，会递归调用
result[keys]=deepClone(origin[keys]);
}else{
//如果不是，就直接赋值
result[keys]=origin[keys];
}
}
}
returnresult;
}
JS的深拷贝的应用，需要根据你的使用场景进行使用，首先是有无必要深拷贝，其次是数据类型，是否直接使用JSON的API其实就可以。
经过小猿圈老师的介绍相信很多同学对于JavaScript深拷贝和浅拷贝有了一定的了解，不过大家不要忘记点赞、收藏、转发呦前端自学交流群：820024416，让更多和你一样有同样问题的同学得到帮助，小猿圈为大家提供一个良好的学习平台。
网友评论