Js
方法1:使用assign
参考: https://cscoder.cn/docs/front-end/js/object-assign.html
示例:
var newObj = {}
var oldObj = { title:'这个是老的对象'}
Object.assign(newObj,oldObj);
局限:对于数组,或者属性是对象的,无法进行深度复制
方法2:使用扩展运算符
示例:
var oldObj = { title:'这个是老的对象'}
var newObj = { ...oldObj,name:'张三' }
//{ title:'这个是老的对象',name:'张三' }
示例2:数组
var oldArray = [1,2,3];
var newArray = [...oldArray,4,5,6]
//[1,2,3,4,5,6]
局限:对于数组,或者属性是对象的,无法进行深度复制
方法3:使用json序列化和反系列化
示例:
var oldArray = [1,2,3];
var newArray = JSON.parse(JSON.stringify(oldArray ));
// [1,2,3]
优势:可以进行任意对象的深度复制
劣势:需要较大的性能要求
方法4:使用内部参数来返回
这其实不能算是复制,只能算是创建,
有这样一种需求,在react中import一个变量进来,然后对这个变量进行深度复制,也就是希望能获得一个新的变量
刚开始用的时候使用了扩展运算符,结果发现在切换Tabs的时候,组件的显示不会刷新,最终发现是因为是同一个对象,
后来使用assign,问题依旧,都是因为没有进行深度复制的缘故,
最终是通过json序列化和反序列化解决
但这会损耗性能
一种比较好的办法是import的时候,import一个方法进来,需要参数的时候使用方法进行创建,
因为返回的数据属于方法里面创建的,所以每次都是新的
const getCategoryItems = ()=>{
var items = [1,2,3,4,5];
return itetms;
};
使用
var items = getCategoryItems();