方法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();