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

Question

<分区>

Answer 1

原生深度克隆

现在有一个 JS 标准叫做 "structured cloning" ，在 Node 11 及更高版本中进行实验性工作，将登陆浏览器，并且具有 polyfills for existing systems .

structuredClone(value)

如果需要，首先加载 polyfill:

import structuredClone from '@ungap/structured-clone';

参见 this answer了解更多详情。

较早的答案

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

如果您不使用Date、函数、undefined、Infinity、RegExp、Maps、Sets、Blob、FileLists、ImageDatas，对象中的稀疏数组、类型化数组或其他复杂类型，深度克隆对象的一种非常简单的方式是:

JSON.parse(JSON.stringify(object))

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
  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()

参见 Corban's answer用于基准。

使用库进行可靠克隆

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

• lodash - cloneDeep ;可以通过 lodash.clonedeep 单独导入模块，如果您还没有使用提供深度克隆功能的库，这可能是您的最佳选择
• AngularJS - angular.copy
• jQuery - jQuery.extend(true, { }, oldObject) ; .clone() 只克隆 DOM 元素
• 只是图书馆 - just-clone ;只做一件事的零依赖 npm 模块库的一部分。 适合各种场合的无罪实用程序。