Vue深浅拷贝
个人理解,深/浅拷贝其实就是指向性的问题(说法可能不是很准确,话糙理不糙)。浅拷贝:新对象赋值,只是取的旧对象栈中的值,也就是引用对象的值。浅拷贝出的所有变量都只是指向了一处而已,故会互相干涉。深拷贝:会在堆里边开辟一个空间,存放自己的对象值。深拷贝出的所有变量都会开辟自己的空间来存放自己的值,因此指向也各不相同,故不会互相干涉。简单的赋值只是做了浅拷贝,所以才会出现我明明给了b值却连a的值也改变
个人理解,深/浅拷贝其实就是指向性的问题(说法可能不是很准确,话糙理不糙)。
浅拷贝:新对象赋值,只是取的旧对象栈中的值,也就是引用对象的值。浅拷贝出的所有变量都只是指向了一处而已,故会互相干涉。
深拷贝:会在堆里边开辟一个空间,存放自己的对象值。深拷贝出的所有变量都会开辟自己的空间来存放自己的值,因此指向也各不相同,故不会互相干涉。
简单的赋值只是做了浅拷贝,所以才会出现我明明给了b值却连a的值也改变的情况,如下:
例子1:
var a = 1,b=a;
console.log(a); // 1
console.log(b) // 1
b = 2;
console.log(a); // 1
console.log(b) // 2
例子2-数组:
var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]
例子3-对象:
var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了,
alert(obj.a); // 20,obj的a跟着改变 !!!
这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改。
这种传参方式是浅拷贝,多个地址指向同一个堆,所有两方会一起修改。
深拷贝的几种方法:
深拷贝对象 / 数组:{...xxx} / [...xxx] 可以深拷贝对象和数组;
this.bean1 = { ...this.bean2 }
this.tableData1 = [...this.tableData2]
仅深拷贝对象:JSON.parse(stringify(xxx)) 可以深拷贝对象;
const a = JSON.parse(JSON.stringify(ary))
仅深拷贝基本对象:object.assign(xx,xxx) 可以深拷贝基本对象(对象中包裹数组的不行),object.assign()的方式是直接返回一个新对象。
const params = {
name: bean.name,
actuTime: bean.actuTime,
date: bean.inocDate,
symptomNames: names,
symptom: bean.symptom
}
this.tableData.push(
Object.assign(params, { unitcode: this.unitCode, manCode: this.empCode })
)
但如果需要将一个JSON对象赋值给一个元素为JSON的数组的某一项,那只能挨个遍历赋值了,但是如果JSON属性项很多,则可以考虑for....in遍历的情况:
指定json给table指定项赋值:
const params = {
name: bean.name,
actuTime: bean.actuTime,
date: bean.inocDate,
symptomNames: names,
symptom: bean.symptom
}
const data = this.tableData[bean.ids] // 已知需要赋值的table指定项
// 遍历赋值
for (const item in data) {
if (params[item]) {
data[item] = params[item]
}
}
更多推荐
所有评论(0)