Vue中浅拷贝与深拷贝的区别
一.赋值1.和原数据一样指向该对象在栈中的地址,而不是堆中的数据,改变会使原数据一同改变,相当于联动关系let obj={name:"demo",age:12}let newObj=obj//赋的值其实是该对象在栈重的地址,而不是数据newObj.name="jack"console.log(newObj)//{name:"jack",age:12}console.log(obj)//{name:
·
一.赋值
1.和原数据一样指向该对象在栈中的地址,而不是堆中的数据,改变会使原数据一同改变,相当于联动关系
let obj={name:"demo",age:12}
let newObj=obj//赋的值其实是该对象在栈重的地址,而不是数据
newObj.name="jack"
console.log(newObj)//{name:"jack",age:12}
console.log(obj)//{name:"jack",age:12}
二.浅拷贝
1.重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,但拷贝前后的对象引用类型因共享同一块内存,会相互影响。
实现方式:Object.assign()
let obj = {
name : '天天开心',
arr : [1,[2,3],4],
};
let obj1=Object.assign({}, obj);
obj1.name = "demo";
obj1.arr[1] = [5,6,7] ;
// 这是个浅拷贝的方法,这里改变了对象的引用类型
console.log('obj',obj)
// obj1 { name: '天天开心', arr: [ 1, [ 5, 6, 7 ], 4 ] }
console.log('obj1',obj1)
// obj3 { name: 'demo', arr: [ 1, [ 5, 6, 7 ], 4 ] }
三.深拷贝
1.从堆内存中开辟了一个新区域存放对象,堆对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响
实现方式:JSON.parse(JSON.stringify())//不能拷贝函数和正则
let arr = [1, 3, { username: ' kobe' }];
let arr1=JSON.parse(JSON.stringify(arr))
arr1[2].username = 'demo';
arr1[0]=18,
console.log(arr)//[1, 3, { username: ' kobe' }]
console.log(arr1)//[18, 3, { username: ' demo' }]
更多推荐
已为社区贡献3条内容
所有评论(0)