Javascript React中的Deepcopy

在reducer中，我们总是使用

Object.assign（{}，state，newState）

来保存状态。但是

assign（）

不支持deepcopy，因为此方法只复制多级对象的引用。这是我的程序代码

const menuListState={
菜单列表：{}，
菜单加载：false
}
函数getMenuList（state=menuListState，action=defaultAction）{
开关（动作类型）{
//月经初潮
案例操作。获取菜单列表成功：
返回Object.assign（{}，state{
menuList:action.data，
菜单加载：false
});
违约：
返回状态；
}
}

确定如果

操作.数据

是引用类型（对象、数组等），

状态.菜单列表

将在更改

操作.数据

时立即更改，因为它们引用的值相同。这只是Javascript的一个普通函数。

您可以使用

JSON.stringify

来字符串化对象，并使用

JSON.parse

将结果字符串解析为对象，您将得到与要深度复制的对象相同的新对象

例如：

let copiedObject = JSON.parse(JSON.stringify(originalObject))

您可能对lodash表格感兴趣，其使用方式如下：

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

---

你可以做，JSON序列化

var clone = JSON.parse(JSON.stringify(oldObjCopy));

但是，不建议将其作为， 您可能会丢失任何Javascript、JSON属性，如

Function

或

undefined

。这些属性会被

JSON.stringify

忽略，从而导致克隆对象上丢失它们。

日期

对象结果为

字符串

。 相反，您可以使用最简单的

Lodash

import cloneDeep from 'lodash/cloneDeep';
var clone = cloneDeep(oldObjCopy);

---

我对这条线很感兴趣。这是我在chrome中的粗略分析。largeObj大约有1.5万查尔

let i, t = new Date().getTime();
for(i=0;i<1000;i++) cloneDeep(largeObj)
console.log('clone', new Date().getTime() - t);

t = new Date().getTime();
for(i=0;i<1000;i++) JSON.parse(JSON.stringify(largeObj));
console.log('JSON', new Date().getTime() - t);

---

我听说这实际上非常快，因为它是本机实现的。虽然答案不是某个本机的React过程，但这个过程很长一段时间以来一直是类似Angular JS 1的公认答案（由于性能和简洁性）。Upvoted请注意使用此方法往返日期时出现的问题。此外，请注意正则表达式，它们会被空字符串替换。只有当对象不包含以下内容时，此操作才有效：

日期、函数、未定义、无穷大、正则表达式、映射、集、Blob、文件列表、ImageData、稀疏数组、类型化数组或其他复杂类型

请参见。若要使用其他链接，请参见其他答案。

clone 46
JSON 82
clone 42
JSON 87
clone 45
JSON 87
clone 46
JSON 85
clone 44
JSON 86