在 JavaScript 中深度克隆对象的最有效方法是什么？

2024-11-02 21:00:00

admin

原创

191

摘要：问题描述：克隆 JavaScript 对象的最有效方法是什么？我见过obj = eval(uneval(o));有人使用这种方法，但这种方法不是标准的，而且只有 Firefox 支持。我做过类似的事情obj = JSON.parse(JSON.stringify(o));，但对效率存疑。我还见过存在各...

问题描述：

克隆 JavaScript 对象的最有效方法是什么？我见过obj = eval(uneval(o));有人使用这种方法，但这种方法不是标准的，而且只有 Firefox 支持。

我做过类似的事情obj = JSON.parse(JSON.stringify(o));，但对效率存疑。

我还见过存在各种缺陷的递归复制函数。

我很惊讶没有规范的解决方案。

解决方案 1：

原生深度克隆

现在structuredClone(value)所有主流浏览器和 node >= 17 都支持此功能。它为旧系统提供了 polyfill。

structuredClone(value)

如果需要，请先加载 polyfill：

import structuredClone from &#039;@ungap/structured-clone&#039;;

有关更多详细信息，请参阅此答案，但请注意以下限制：

函数对象无法通过结构化克隆算法复制；尝试复制将引发 DataCloneError 异常。
克隆 DOM 节点同样会引发 DataCloneError 异常。
某些对象属性不会被保留：
- RegExp 对象的 lastIndex 属性未被保留。
- 属性描述符、setter、getter 和类似元数据的功能不会被复制。例如，如果某个对象使用属性描述符标记为只读，则它将在复制中被读取/写入，因为这是默认设置。
- 原型链不会被遍历或复制。

较早的答案

快速克隆但数据丢失 - JSON.parse/stringify

如果你的对象中没有使用Dates、函数undefined、、、InfinityRegExps、Maps、Sets、Blobs、FileLists、ImageDatas、稀疏数组、类型数组或其他复杂类型，那么深度克隆对象的一个非常简单的方法是：

JSON.parse(JSON.stringify(object))

const a = {
  string: &#039;string&#039;,
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to &#039;null&#039;
  re: /.*/,  // lost
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

运行代码片段Hide results展开片段

请参阅Corban 的回答以了解基准。

使用库进行可靠克隆

由于克隆对象并非易事（复杂类型、循环引用、函数等），大多数主流库都提供了克隆对象的函数。不要重新发明轮子- 如果您已经在使用库，请检查它是否具有对象克隆功能。例如，

lodash - ; 可以通过lodash.clonedeepcloneDeep模块单独导入，如果你还没有使用提供深度克隆功能的库，那么这可能是你最好的选择
拉姆达 -clone
AngularJS -angular.copy
jQuery - jQuery.extend(true, { }, oldObject)；.clone()仅克隆 DOM 元素
只是库 - just-clone；零依赖 npm 模块库的一部分，只做一件事。适合各种场合的无负担实用程序。

解决方案 2：

查看此基准：http://jsben.ch/#/bWfk9

在我之前的测试中，速度是主要关注点，我发现

JSON.parse(JSON.stringify(obj))

这是深度克隆对象最慢的方式（比将标志设置为true 的jQuery.extenddeep慢 10-20%）。

deep当标志设置为（浅克隆）时，jQuery.extend 非常快false。这是一个不错的选择，因为它包含一些额外的逻辑来进行类型验证，并且不会复制未定义的属性等，但这也会使您的速度稍微变慢。

如果您知道要克隆的对象的结构或者可以避免深度嵌套数组，您可以编写一个简单的for (var i in obj)循环来克隆您的对象，同时检查 hasOwnProperty，这将比 jQuery 快得多。

最后，如果您尝试在热循环中克隆已知对象结构，则只需内联克隆过程并手动构建对象即可获得更高的性能。

JavaScript 跟踪引擎在优化for..in循环方面很差劲，检查 hasOwnProperty 也会拖慢您的速度。当速度是绝对必须时，请手动克隆。

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}

请谨慎在对象JSON.parse(JSON.stringify(obj))上使用该方法 -返回 ISO 格式的日期字符串表示，该字符串不会转换回对象。有关更多详细信息，请参阅此答案。Date`JSON.stringify(new Date())`JSON.parse() Date

此外，请注意，至少在 Chrome 65 中，本机克隆不是可行的方法。根据 JSPerf 的说法，通过创建新函数执行本机克隆比使用 JSON.stringify 慢近800 倍，而 JSON.stringify 在所有方面都非常快。

ES6 更新

如果您正在使用 Javascript ES6，请尝试此本机方法进行克隆或浅复制。

Object.assign({}, obj);

解决方案 3：

结构化克隆

const clone = structuredClone(original);

现代浏览器和运行时提供了一个structuredClone全局函数，公开了 HTML 标准先前内部的结构化克隆/序列化算法，用于创建对象的深度克隆。它仍然仅限于某些内置类型，但除了 JSON 支持的少数类型之外，它还支持日期、正则表达式、映射、集合、Blob、文件列表、图像数据、稀疏数组、类型化数组，未来可能还会支持更多类型。它还保留了克隆数据中的引用，使其能够支持会导致 JSON 错误的循环和递归结构。

如果您需要支持较旧的环境，此答案的其余部分描述了在直接暴露之前使用此功能的解决方法。

同步 Node.js 解决方法：太棒了！