js对象的拷贝问题

问题如下
点击+之后,新建一行,并赋予初始,从原始的数组中直接复制第一个,然后在push到数组中,结果改变输入框后,其它的值也改变,实际情况,只是想要拷贝该对象的一个值。
图片

代码如下:

1
2
let newObj = this.submenu.optionals[0];
this.submenu.optionals.push(newObj);

这样直接将对象赋值给newObj,新插入的项与第一项引用的是同一个地址,因此会造成修改的同时发生。
图片

这种直接将对象复制给一个新的对象,是js中的浅拷贝。

对象的深拷贝是只复制对象的属性和值,不是引用对象。
采取的一个方法:把对象的属性遍历一遍,赋给一个新的对象。

1
2
3
4
5
6
7
8
9
10
var deepCopy= function(obj) {
var newObj={};
for (var key in obj) {
//需要判断一些属性是否是对象,如果是就递归
newObj[key] = typeof obj[key]===’object’?
deepCoyp(obj[key]):
obj[key];
}
return newObj;
}

可以lodash的api,可以直接

1
let newObj = _.clone(obj);

很方便。