小编典典

在JavaScript中深度clone对象的最有效方法是什么?

javascript

clone JavaScript对象的最有效方法是什么?我见过obj = eval(uneval(o));使用它,但这是非标准的,仅受Firefox支持。

我做了类似的事情,obj = JSON.parse(JSON.stringify(o));但对效率提出了质疑。

我还看到了具有各种缺陷的递归复制功能。
我很惊讶没有规范的解决方案存在。


阅读 538

收藏
2020-04-22

共1个答案

小编典典

快速clone而数据丢失-JSON.parse / stringify

如果不使用DateS,功能,undefinedInfinity,正则表达式,Maps, Sets, Blobs,的文件列表,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()

Reliable cloning using a library

由于cloning objects并非易事(复杂类型,循环引用,函数等),因此大多数主要库都提供了用于克隆对象的函数。 Don’t reinvent the wheel如果您已经在使用库,请检查它是否具有对象cloning功能。例如,

  • odash- cloneDeep; 可以通过lodash.clonedeep模块单独导入,如果您尚未使用提供深度克隆功能的库,则可能是您的最佳选择
  • AngularJS- angular.copy
  • jQuery- jQuery.extend(true, { }, oldObject); .clone()仅cloning DOM元素

ES6

为了完整起见,请注意ES6提供了两种浅表复制机制:Object.assign()和扩展语法。它将所有可枚举的自身属性的值从一个对象复制到另一个对象。例如:

var A1 = {a: "2"};
var A2 = Object.assign({}, A1);
var A3 = {...A1};  // Spread Syntax
2020-04-22