项目中用v-for遍历一个对象{ count:"",age:""}进行参数渲染,输入参数后送到后端要转化为JSON字符串,于是提交之前新声明了一个对象,值为原先对象的JSON.stringify字符串。但是,问题来了,后端接口还没部署上去,调用的时候是502,接口调用不成功不会走剩下的流程。
此时,数据已经改动为JSON字符串了,v-for遍历的对象改成JSON字符串“{“count”:“bb”,“age”:“ff”}”。于是遍历时就以字符串的形式进行渲染,出现如下图所示的参数渲染。
那么,如何避免出现这种情况呢?
需要对对象进行深拷贝。
深拷贝使得拷贝过来的对象不修改原对象。上面的表现就是因为拷贝的对象是浅拷贝,当修改新拷贝出来的对象时,原对象同时也被修改了。
对象的深度拷贝
第一种:JSON.parse(JSON.stringify(obj));
第二种:Object.assign
第一种是完全深度拷贝,第二种使用时要注意了
对于Object.assign
第一级属性是深拷贝,第一级以下是浅拷贝
let origin = { key1:“1”,key2:”2”,key3:{ a:1,b:2 }}
let copyfromOrign = Object.assign({},origin);
copyfromOrign.key3 = { a:3,b:4}
console.log(origin);
console.log(copyFromOrigin);
//两个都是返回{key1:”1”,key2:”2”,key3:{ a:”3”,b:”4”}}
//两个都是返回{key1:”1”,key2:”2”,key3:{ a:”3”,b:”4”}}
数组深拷贝除了用JSON.parse(JSON.stringify(arr1))外,还有其他的方法。
1、一维数组
let arr1 = [1,2,3];
let arr2 = arr1.concat();
2、多维数组
let arr2 = JSON.parse(JSON.stringify(arr1));
3、es6使用一维数组
let arr3 = [...arr];
let [...arr4] = arr;