js深拷贝和浅拷贝区别
浅拷贝和深拷贝的区别1.浅拷贝：将源对象或者原数组的引用 ```直接赋给``` 新对象/新数组 ，新对象/新数组只是```对原对象的一个引用``` 2.深拷贝：创建一个新的对象或者数组，将源对象的各项属性的值拷贝过来
是“值”而不是“引用”
为什么要使用深拷贝希望在改变新数组/对象的时候，不改变原数组/对象
深拷贝的要求程度简单的对象深拷贝使用我们在使用深拷贝的时候，一定要弄清楚我们对深拷贝的要求程度： 是仅仅“深”拷贝第一层级的对象属性或数组元素，还是递归拷贝所有层级的对象属性和数组元素？
JSON.parse 和JSON.stringify 但是遇到undefined、function、Symbol的时候会在转换过程中忽略，也就是复制不了这些类型的数据。eg:var syb = Symbol('obj');
var person = {
name:'tino',
say:function(){
console.log('hi')
}，
ok:syb,
un:undefined
};
var copy = JSON.parse(JSON.stringify(person));
//{name:'tino'}
【js深拷贝和浅拷贝区别】如上所述，如果要复制的对象里面含有这些数据将不被拷贝，然后我们再换一个方法，我们自己封装一个函数来解决。
var arr = [{name:"塞内加尔",color:"pink"},{name:"乌斯怀亚",color:"orange"}];
function deepCopy(obj){
var result = Array.isArray(obj)?[]:{};
for(var key in obj){
if(obj.hasOwnProperty(key)){
if(typeof obj[key]==="object"){
result[key] = deepCopy(obj[key]);
//递归复制
}else{
result[key] = obj[key];
}
}
}
return result;
}
console.log(deepCopy(person));
//{
//name:'tino',
//say:function(){
//console.log('hi')
// }，
// ok:syb,
// un:undefined
//}
console.log(arr);
// [{name:"塞内加尔",color:"pink"},{name:"乌斯怀亚",color:"orange"}]
如何检验深拷贝成功改变任意一个新对象/数组的值，如果原对象/数组的值不变就成功，否则失败。
浅拷贝的第一种方法
function copyFunc(data){
let obj = {};
for(let i in data){
obj[i] = data[i];
}
return obj;
}
var obj = {
a:"hello",
b:{
a:"world",
b:21
},
c:["Bob","Tom","Jenny"],
d:function(){
alert("hello world")
}
};
var qiancopy =copyFunc(obj);
qiancopy.a = "a is changed";
qiancopy.b.a = "b.a is changed";
qiancopy.b.b = "b.b is changed";
qiancopy.c = [1,2,3];
qiancopy.d = function(){
alert('d is changed')
};
console.log('a-'+obj.a);
//'hello'
console.log('a-'+qiancopy.a) ;
//'changed'
console.log('b.a-'+obj.b.a);
// 'b.a is changed'
console.log('b.a-'+qiancopy.b.a) ;
// 'b.a is changed'
console.log('b.b-'+obj.b.b);
//'b.b is changed'
console.log('b.b-'+qiancopy.b.b);
// 'b.b is changed'
console.log('c-'+obj.c);
//'["Bob","Tom","Jenny"]'
console.log('c-'+qiancopy.c);
//[1,2,3]
console.log('d-'+obj.d);
//function(){alert('hello world')}
console.log('d-'+qiancopy.d);
//function (){alert("d is changed")}
//事实上就是只有对象是拷贝的引用类型
文章图片
image.png 对象的值改变是因为浅拷贝他们的值指向同一个对象
浅拷贝就是拷贝了一层，除了对象是拷贝的引用类型，其他都是直接将值传递，有自己的内存空间的。
浅拷贝的第二种方法ES6的Object.assign()方法，object.assign是es6的新函数。Object.assign()方法可已经任意多个的原对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
var obj2= {
a:"1",
b:{
a:"b.a",
b:"b.b"
},
e:3
}
var copyAssign = Object.assign({},obj,obj2);
//obj为上面定义的
//如果引用的源对象有属性重复，去最后那个，如果有新属性，直接加进去
推荐阅读
- 急于表达——往往欲速则不达
- 第三节|第三节 快乐和幸福（12）
- 20170612时间和注意力开销记录
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 对称加密和非对称加密的区别
- 眼光要放高远
- 深入理解Go之generate
- 樱花雨
- 由浅入深理解AOP
- 前任