结构化克隆

Question

克隆JavaScript对象的最有效方法是什么？我已经看到obj = eval(uneval(o));被使用，但是that's non-standard and only supported by Firefox。

我做过像obj = JSON.parse(JSON.stringify(o));这样的事情，但质疑效率。

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

Answer 1

注意：这是对另一个答案的回复，而不是对此问题的正确回答。如果您希望快速克隆对象，请按Corban's advice in their answer进入此问题。

我想要注意 jQuery 中的.clone()方法只能克隆DOM元素。要克隆JavaScript对象，您可以执行以下操作：

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

更多信息可在jQuery documentation。

中找到

我还想要注意，深拷贝实际上比上面显示的更聪明 - 它能够避免许多陷阱（例如，尝试深度扩展DOM元素）。它经常在jQuery核心和插件中使用，效果很好。

Answer 2

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

在我之前的测试中，速度是我发现的一个主要问题

JSON.parse(JSON.stringify(obj))

是深度克隆一个对象的最快方法（它将深度标记设置为0到20％时击败jQuery.extend）。

当深度标志设置为false（浅层克隆）时，jQuery.extend非常快。这是一个很好的选择，因为它包含一些额外的类型验证逻辑，不会复制未定义的属性等，但这也会让你慢下来。

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

最后，如果您尝试在热循环中克隆已知对象结构，只需简单地嵌入克隆过程并手动构建对象，即可获得更多性能。

JavaScript跟踪引擎在优化for..in循环时很糟糕，并且检查hasOwnProperty也会减慢你的速度。当速度是绝对必须时手动克隆。

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

谨防使用JSON.parse(JSON.stringify(obj))对象上的Date方法 - JSON.stringify(new Date())以ISO格式返回日期的字符串表示形式，JSON.parse() 不会转换回Date对象。 See this answer for more details

此外，请注意，至少在Chrome 65中，本机克隆是不可取的。根据{{3}}，通过创建新函数执行本机克隆几乎 800x 比使用JSON.stringify慢得多，这在整个过程中都非常快。

Answer 3

假设您的对象中只有变量而不是任何函数，您可以使用：

var newObject = JSON.parse(JSON.stringify(oldObject));

Answer 4

结构化克隆

HTML标准包括an internal structured cloning/serialization algorithm，可以创建对象的深层克隆。它仍然局限于某些内置类型，但除了JSON支持的少数类型之外，它还支持日期，RegExps，地图，集合，Blob，FileLists，ImageDatas，稀疏数组，类型化数组，以及未来可能更多。它还保留了克隆数据中的引用，允许它支持可能导致JSON错误的循环和递归结构。

Node.js支持：实验

Node.js中的v8模块当前（从节点11开始）exposes the structured serialization API directly，但此功能仍标记为“实验性”，并且在将来的版本中可能会更改或删除。如果您使用的是兼容版本，则克隆对象非常简单：

const v8 = require('v8');

const structuredClone = obj => {
  return v8.deserialize(v8.serialize(obj));
};

浏览器的直接支持：可能最终？

浏览器目前不提供结构化克隆算法的直接接口，但whatwg/html#793 on GitHub中已讨论过全局structuredClone()函数。正如目前提出的那样，在大多数情况下使用它将非常简单：

const clone = structuredClone(original);

除非发布此内容，否则浏览器的结构化克隆实现仅间接公开。

异步解决方法：可用。

使用现有API创建结构化克隆的低开销方法是通过MessageChannels的一个端口发布数据。另一个端口将发出message事件，其中包含附加.data的结构化克隆。不幸的是，监听这些事件必然是异步的，并且同步替代方案不太实用。

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({key, value});
    });
  }
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);

使用示例：

const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

同步解决方法：太可怕了！

没有很好的选项可以同步创建结构化克隆。以下是一些不切实际的黑客攻击。

history.pushState()和history.replaceState()都会创建第一个参数的结构化克隆，并将该值分配给history.state。您可以使用它来创建任何对象的结构化克隆，如下所示：

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

使用示例：

'use strict';

const main = () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = structuredClone(original);
  
  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));
  
  console.log("Assertions complete.");
};

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

main();

虽然是同步的，但这可能会非常慢。它会产生与操纵浏览器历史记录相关的所有开销。反复调用此方法可能会导致Chrome暂时无法响应。

Notification constructor创建其关联数据的结构化克隆。它还会尝试向用户显示浏览器通知，但除非您已请求通知权限，否则将以静默方式失败。如果您有其他目的的许可，我们将立即关闭我们创建的通知。

const structuredClone = obj => {
  const n = new Notification('', {data: obj, silent: true});
  n.onshow = n.close.bind(n);
  return n.data;
};

使用示例：

'use strict';

const main = () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = structuredClone(original);
  
  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));
  
  console.log("Assertions complete.");
};

const structuredClone = obj => {
  const n = new Notification('', {data: obj, silent: true});
  n.close();
  return n.data;
};

main();

Answer 5

如果没有内置的，你可以尝试：

function clone(obj) {
    if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;

    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();

    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

Answer 6

在一行代码中克隆（不深度克隆）对象的有效方法

Object.assign方法是ECMAScript 2015（ES6）标准的一部分，完全符合您的要求。

var clone = Object.assign({}, obj);

Object.assign（）方法用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。

支持旧浏览器的 polyfill ：

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

Answer 7

代码：

// extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned
function extend(from, to)
{
    if (from == null || typeof from != "object") return from;
    if (from.constructor != Object && from.constructor != Array) return from;
    if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
        from.constructor == String || from.constructor == Number || from.constructor == Boolean)
        return new from.constructor(from);

    to = to || new from.constructor();

    for (var name in from)
    {
        to[name] = typeof to[name] == "undefined" ? extend(from[name], null) : to[name];
    }

    return to;
}

测试：

var obj =
{
    date: new Date(),
    func: function(q) { return 1 + q; },
    num: 123,
    text: "asdasd",
    array: [1, "asd"],
    regex: new RegExp(/aaa/i),
    subobj:
    {
        num: 234,
        text: "asdsaD"
    }
}

var clone = extend(obj);

Answer 8

这就是我正在使用的：

function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(typeof(obj[i])=="object" && obj[i] != null)
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

Answer 9

按效果进行深层复制 排名从最佳到最差

重新分配“=”（字符串数组，仅数字数组）
切片（字符串数组，仅数字数组）
连接（字符串数组，仅数字数组）
自定义功能：for-loop或递归复制
jQuery的$ .extend
JSON.parse（字符串数组，数组数组，仅限对象数组）
Underscore.js的_.clone（字符串数组，仅数字数组）
Lo-Dash的_.cloneDeep

深层复制字符串或数字数组（一级 - 无参考指针）：

当数组包含数字和字符串时 - 函数如.slice（）,. concat（）,. splice（），赋值运算符“=”和Underscore.js的克隆函数;将制作数组元素的深层副本。

重新分配的速度最快：

var arr1 = ['a', 'b', 'c'];
var arr2 = arr1;
arr1 = ['a', 'b', 'c'];

.slice（）的性能优于.concat（）， http://jsperf.com/duplicate-array-slice-vs-concat/3

var arr1 = ['a', 'b', 'c'];  // Becomes arr1 = ['a', 'b', 'c']
var arr2a = arr1.slice(0);   // Becomes arr2a = ['a', 'b', 'c'] - deep copy
var arr2b = arr1.concat();   // Becomes arr2b = ['a', 'b', 'c'] - deep copy

深层复制一个对象数组（两个或多个关卡 - 引用指针）：

var arr1 = [{object:'a'}, {object:'b'}];

编写自定义函数（性能比$ .extend（）或JSON.parse快）：

function copy(o) {
   var out, v, key;
   out = Array.isArray(o) ? [] : {};
   for (key in o) {
       v = o[key];
       out[key] = (typeof v === "object" && v !== null) ? copy(v) : v;
   }
   return out;
}

copy(arr1);

使用第三方实用程序功能：

$.extend(true, [], arr1); // Jquery Extend
JSON.parse(arr1);
_.cloneDeep(arr1); // Lo-dash

jQuery的$ .extend具有更好的性能：

Answer 10

var clone = function() {
    var newObj = (this instanceof Array) ? [] : {};
    for (var i in this) {
        if (this[i] && typeof this[i] == "object") {
            newObj[i] = this[i].clone();
        }
        else
        {
            newObj[i] = this[i];
        }
    }
    return newObj;
}; 

Object.defineProperty( Object.prototype, "clone", {value: clone, enumerable: false});

Answer 11

有一个library (called “clone”)，这样做很好。它提供了我所知道的最完整的递归克隆/复制任意对象。它还支持循环引用，但尚未涵盖其他答案。

你也可以find it on npm。它可以用于浏览器以及Node.js。

以下是如何使用它的示例：

用

安装

npm install clone

或将其与Ender打包。

ender build clone [...]

您也可以手动下载源代码。

然后您可以在源代码中使用它。

var clone = require('clone');

var a = { foo: { bar: 'baz' } };  // inital value of a
var b = clone(a);                 // clone a -> b
a.foo.bar = 'foo';                // change a

console.log(a);                   // { foo: { bar: 'foo' } }
console.log(b);                   // { foo: { bar: 'baz' } }

（免责声明：我是图书馆的作者。）

Answer 12

Cloning一个对象在JS中始终是一个问题，但是在ES6之前它是关于我的，我在下面列出了在JavaScript中复制对象的不同方法，想象你有下面的对象并希望深入副本：

var obj = {a:1, b:2, c:3, d:4};

有几种方法可以复制此对象，而无需更改原点：

1）ES5 +，使用简单的功能为您复制：

function deepCopyObj(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = cloneSO(obj[i]);
        }
        return copy;
    }
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = cloneSO(obj[attr]);
        }
        return copy;
    }
    throw new Error("Unable to copy obj this object.");
}

2）ES5 +，使用JSON.parse和JSON.stringify。

var  deepCopyObj = JSON.parse(JSON.stringify(obj));

3）AngularJs：

var  deepCopyObj = angular.copy(obj);

4）jQuery：

var deepCopyObj = jQuery.extend(true, {}, obj);

5）UnderscoreJs＆amp; Loadash：

var deepCopyObj = _.cloneDeep(obj); //latest version UndescoreJs makes shallow copy

希望这些帮助...

Answer 13

我知道这是一个老帖子，但我认为这可能对下一个偶然发现的人有所帮助。

只要您不将对象分配给任何内容，它就不会在内存中保留任何引用。因此，要创建一个您想要在其他对象之间共享的对象，您必须创建一个这样的工厂：

var a = function(){
    return {
        father:'zacharias'
    };
},
b = a(),
c = a();
c.father = 'johndoe';
alert(b.father);

Answer 14

如果您正在使用它，则Underscore.js库具有clone方法。

var newObject = _.clone(oldObject);

Answer 15

使用JavaScript深度复制对象（我认为最好和最简单的方法）

1。使用JSON.parse（JSON.stringify（object））;

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}
var newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }

2。使用创建的方法

function cloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(obj[i] != null &&  typeof(obj[i])=="object")
            clone[i] = cloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}
var newObj = cloneObject(obj);
obj.b.c = 20;

console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }

3。使用Lo-Dash的_.cloneDeep 链接lodash

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }

4。使用Object.assign（）方法

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }

但是错误

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = Object.assign({}, obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// Note: Properties on the prototype chain and non-enumerable properties cannot be copied.

5。使用Underscore.js _.clone 链接Underscore.js

var obj = { 
  a: 1,
  b: 2
}

var newObj = _.clone(obj);
obj.b = 20;
console.log(obj); // { a: 1, b: 20 }
console.log(newObj); // { a: 1, b: 2 }

但是错误

var obj = { 
  a: 1,
  b: { 
    c: 2
  }
}

var newObj = _.cloneDeep(obj);
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 20 } } --> WRONG
// (Create a shallow-copied clone of the provided plain object. Any nested objects or arrays will be copied by reference, not duplicated.)

Reference medium.com

JSBEN.CH性能基准测试场1〜3 http://jsben.ch/KVQLd

Answer 16

以上是ConroyP上面的答案的一个版本，即使构造函数需要参数也可以使用：

//If Object.create isn't already defined, we just do the simple shim,
//without the second argument, since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
    object_create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

function deepCopy(obj) {
    if(obj == null || typeof(obj) !== 'object'){
        return obj;
    }
    //make sure the returned object has the same prototype as the original
    var ret = object_create(obj.constructor.prototype);
    for(var key in obj){
        ret[key] = deepCopy(obj[key]);
    }
    return ret;
}

此功能也可在我的simpleoo库中使用。

修改

这是一个更强大的版本（感谢Justin McCandless，现在它也支持循环引用）：

/** * Deep copy an object (make copies of all its object properties, sub-properties, etc.) * An improved version of http://keithdevens.com/weblog/archive/2007/Jun/07/javascript.clone * that doesn't break if the constructor has required parameters * * It also borrows some code from http://stackoverflow.com/a/11621004/560114 */ function deepCopy(src, /* INTERNAL */ _visited, _copiesVisited) { if(src === null || typeof(src) !== 'object'){ return src; } //Honor native/custom clone methods if(typeof src.clone == 'function'){ return src.clone(true); } //Special cases: //Date if(src instanceof Date){ return new Date(src.getTime()); } //RegExp if(src instanceof RegExp){ return new RegExp(src); } //DOM Element if(src.nodeType && typeof src.cloneNode == 'function'){ return src.cloneNode(true); } // Initialize the visited objects arrays if needed. // This is used to detect cyclic references. if (_visited === undefined){ _visited = []; _copiesVisited = []; } // Check if this object has already been visited var i, len = _visited.length; for (i = 0; i < len; i++) { // If so, get the copy we already made if (src === _visited[i]) { return _copiesVisited[i]; } } //Array if (Object.prototype.toString.call(src) == '[object Array]') { //[].slice() by itself would soft clone var ret = src.slice(); //add it to the visited array _visited.push(src); _copiesVisited.push(ret); var i = ret.length; while (i--) { ret[i] = deepCopy(ret[i], _visited, _copiesVisited); } return ret; } //If we've reached here, we have a regular object //make sure the returned object has the same prototype as the original var proto = (Object.getPrototypeOf ? Object.getPrototypeOf(src): src.__proto__); if (!proto) { proto = src.constructor.prototype; //this line would probably only be reached by very old browsers } var dest = object_create(proto); //add this object to the visited array _visited.push(src); _copiesVisited.push(dest); for (var key in src) { //Note: this does NOT preserve ES5 property attributes like 'writable', 'enumerable', etc. //For an example of how this could be modified to do so, see the singleMixin() function dest[key] = deepCopy(src[key], _visited, _copiesVisited); } return dest; } //If Object.create isn't already defined, we just do the simple shim, //without the second argument, since that's all we need here var object_create = Object.create; if (typeof object_create !== 'function') { object_create = function(o) { function F() {} F.prototype = o; return new F(); }; }

Answer 17

以下内容创建了同一对象的两个实例。我发现它并且正在使用它。它简单易用。

var objToCreate = JSON.parse(JSON.stringify(cloneThis));

Answer 18

Lodash有一个很好的_.cloneDeep(value)方法：

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

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

Answer 19

Crockford建议（我更喜欢）使用此功能：

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var newObject = object(oldObject);

它很简洁，按预期工作，你不需要图书馆。

修改

这是Object.create的填充，因此您也可以使用此功能。

var newObject = Object.create(oldObject);

注意：如果您使用其中某些内容，则可能会遇到使用hasOwnProperty的某些迭代的问题。因为，create创建了一个继承oldObject的新空对象。但它对于克隆对象仍然有用且实用。

例如oldObject.a = 5;

newObject.a; // is 5

但：

oldObject.hasOwnProperty(a); // is true newObject.hasOwnProperty(a); // is false

Answer 20

function clone(obj)
 { var clone = {};
   clone.prototype = obj.prototype;
   for (property in obj) clone[property] = obj[property];
   return clone;
 }

Answer 21

浅拷贝单行（ECMAScript 5th edition）：

var origin = { foo : {} };
var copy = Object.keys(origin).reduce(function(c,k){c[k]=origin[k];return c;},{});

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

浅拷贝单行（ECMAScript 6th edition，2015）：

var origin = { foo : {} };
var copy = Object.assign({}, origin);

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

Answer 22

仅仅因为我没有看到提到的AngularJS，并认为人们可能想知道......

angular.copy还提供了一种深度复制对象和数组的方法。

Answer 23

对于类似数组的对象，似乎还没有理想的深度克隆运算符。如下面的代码所示，John Resig的jQuery克隆器将具有非数字属性的数组转换为非数组的对象，RegDwight的JSON克隆器删除非数字属性。以下测试在多个浏览器上说明了这些要点：

function jQueryClone(obj) {
   return jQuery.extend(true, {}, obj)
}

function JSONClone(obj) {
   return JSON.parse(JSON.stringify(obj))
}

var arrayLikeObj = [[1, "a", "b"], [2, "b", "a"]];
arrayLikeObj.names = ["m", "n", "o"];
var JSONCopy = JSONClone(arrayLikeObj);
var jQueryCopy = jQueryClone(arrayLikeObj);

alert("Is arrayLikeObj an array instance?" + (arrayLikeObj instanceof Array) +
      "\nIs the jQueryClone an array instance? " + (jQueryCopy instanceof Array) +
      "\nWhat are the arrayLikeObj names? " + arrayLikeObj.names +
      "\nAnd what are the JSONClone names? " + JSONCopy.names)

Answer 24

根据您的目标是否克隆“普通的旧JavaScript对象”，我有两个很好的答案。

让我们假设你的目的是创建一个完整的克隆，没有原型引用回到源对象。如果你对一个完整的克隆不感兴趣，那么你可以使用其他一些答案中提供的许多Object.clone（）例程（Crockford的模式）。

对于普通的旧JavaScript对象，在现代运行时克隆对象的一种经过验证的好方法很简单：

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

请注意，源对象必须是纯JSON对象。这就是说，它的所有嵌套属性都必须是标量（如boolean，string，array，object等）。任何函数或特殊对象（如RegExp或Date）都不会被克隆。

有效吗？哎呀。我们已经尝试了各种克隆方法，这种方法效果最好。我相信一些忍者可以想出一个更快的方法。但我怀疑我们谈论的是边际收益。

这种方法简单易行。将它包装成一个便利功能，如果你真的需要挤出一些收益，请稍后再去。

现在，对于非纯JavaScript对象，没有一个非常简单的答案。实际上，由于JavaScript函数和内部对象状态的动态特性，不可能存在。深入克隆具有内部函数的JSON结构需要重新创建这些函数及其内部上下文。而JavaScript根本没有标准化的方法。

再次执行此操作的正确方法是通过在代码中声明和重用的便捷方法。方便的方法可以让您对自己的对象有所了解，这样您就可以确保在新对象中正确地重新创建图形。

我们写的是自己的，但我所看到的最好的一般方法都在这里讨论：

http://davidwalsh.name/javascript-clone

这是正确的想法。作者（David Walsh）评论了广义函数的克隆。根据您的使用情况，您可以选择这样做。

主要思想是你需要在每个类型的基础上特殊处理你的函数（或者原型类）的实例化。在这里，他提供了几个RegExp和Date的例子。

此代码不仅简短，而且非常易读。这很容易扩展。

效率这么高吗？哎呀。鉴于目标是生成真正的深拷贝克隆，那么您将不得不遍历源对象图的成员。通过这种方法，您可以确切地调整要处理的子成员以及如何手动处理自定义类型。

所以你去吧。两种方法。在我看来，两者都是有效的。

Answer 25

这通常不是最有效的解决方案，但它可以满足我的需求。简单的测试用例如下......

function clone(obj, clones) {
    // Makes a deep copy of 'obj'. Handles cyclic structures by
    // tracking cloned obj's in the 'clones' parameter. Functions 
    // are included, but not cloned. Functions members are cloned.
    var new_obj,
        already_cloned,
        t = typeof obj,
        i = 0,
        l,
        pair; 

    clones = clones || [];

    if (obj === null) {
        return obj;
    }

    if (t === "object" || t === "function") {

        // check to see if we've already cloned obj
        for (i = 0, l = clones.length; i < l; i++) {
            pair = clones[i];
            if (pair[0] === obj) {
                already_cloned = pair[1];
                break;
            }
        }

        if (already_cloned) {
            return already_cloned; 
        } else {
            if (t === "object") { // create new object
                new_obj = new obj.constructor();
            } else { // Just use functions as is
                new_obj = obj;
            }

            clones.push([obj, new_obj]); // keep track of objects we've cloned

            for (key in obj) { // clone object members
                if (obj.hasOwnProperty(key)) {
                    new_obj[key] = clone(obj[key], clones);
                }
            }
        }
    }
    return new_obj || obj;
}

循环阵列测试......

a = []
a.push("b", "c", a)
aa = clone(a)
aa === a //=> false
aa[2] === a //=> false
aa[2] === a[2] //=> false
aa[2] === aa //=> true

功能测试......

f = new Function
f.a = a
ff = clone(f)
ff === f //=> true
ff.a === a //=> false

Answer 26

AngularJS

如果你正在使用棱角分明，你也可以这样做

var newObject = angular.copy(oldObject);

Answer 27

我不同意得票最多的答案here。 递归深度克隆 比 JSON.parse（JSON.stringify（obj））方法快得多。

Jsperf 在此排名第一：https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5
Jsben 从上面的答案中更新，以显示递归深度克隆击败所有其他提及的内容：http://jsben.ch/13YKQ

这里有快速参考的功能：

function cloneDeep (o) {
  let newO
  let i

  if (typeof o !== 'object') return o

  if (!o) return o

  if (Object.prototype.toString.apply(o) === '[object Array]') {
    newO = []
    for (i = 0; i < o.length; i += 1) {
      newO[i] = cloneDeep(o[i])
    }
    return newO
  }

  newO = {}
  for (i in o) {
    if (o.hasOwnProperty(i)) {
      newO[i] = cloneDeep(o[i])
    }
  }
  return newO
}

Answer 28

// obj target object, vals source object
var setVals = function (obj, vals) {
    if (obj && vals) {
        for (var x in vals) {
            if (vals.hasOwnProperty(x)) {
                if (obj[x] && typeof vals[x] === 'object') {
                    obj[x] = setVals(obj[x], vals[x]);
                } else {
                    obj[x] = vals[x];
                }
            }
        }
    }
    return obj;
};

Answer 29

对于想要使用JSON.parse(JSON.stringify(obj))版本但不丢失Date对象的人，可以使用second argument of parse method将字符串转换回日期：

function clone(obj) {
  var regExp = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
  return JSON.parse(JSON.stringify(x), function(k, v) {
    if (typeof v === 'string' && regExp.test(v))
      return new Date(v);
    return v;
  });
}

Answer 30

这是一个可以克隆任何JavaScript对象的综合clone（）方法。它几乎处理所有情况：

function clone(src, deep) {

    var toString = Object.prototype.toString;
    if (!src && typeof src != "object") {
        // Any non-object (Boolean, String, Number), null, undefined, NaN
        return src;
    }

    // Honor native/custom clone methods
    if (src.clone && toString.call(src.clone) == "[object Function]") {
        return src.clone(deep);
    }

    // DOM elements
    if (src.nodeType && toString.call(src.cloneNode) == "[object Function]") {
        return src.cloneNode(deep);
    }

    // Date
    if (toString.call(src) == "[object Date]") {
        return new Date(src.getTime());
    }

    // RegExp
    if (toString.call(src) == "[object RegExp]") {
        return new RegExp(src);
    }

    // Function
    if (toString.call(src) == "[object Function]") {

        //Wrap in another method to make sure == is not true;
        //Note: Huge performance issue due to closures, comment this :)
        return (function(){
            src.apply(this, arguments);
        });
    }

    var ret, index;
    //Array
    if (toString.call(src) == "[object Array]") {
        //[].slice(0) would soft clone
        ret = src.slice();
        if (deep) {
            index = ret.length;
            while (index--) {
                ret[index] = clone(ret[index], true);
            }
        }
    }
    //Object
    else {
        ret = src.constructor ? new src.constructor() : {};
        for (var prop in src) {
            ret[prop] = deep
                ? clone(src[prop], true)
                : src[prop];
        }
    }
    return ret;
};

Answer 31

仅当您可以使用ECMAScript 6或transpilers。

时

特点：

复制时不会触发getter / setter。
保留getter / setter。
保留原型信息。
适用于 object-literal 和功能性 OO写作风格。

代码：

function clone(target, source){

    for(let key in source){

        // Use getOwnPropertyDescriptor instead of source[key] to prevent from trigering setter/getter.
        let descriptor = Object.getOwnPropertyDescriptor(source, key);
        if(descriptor.value instanceof String){
            target[key] = new String(descriptor.value);
        }
        else if(descriptor.value instanceof Array){
            target[key] = clone([], descriptor.value);
        }
        else if(descriptor.value instanceof Object){
            let prototype = Reflect.getPrototypeOf(descriptor.value);
            let cloneObject = clone({}, descriptor.value);
            Reflect.setPrototypeOf(cloneObject, prototype);
            target[key] = cloneObject;
        }
        else {
            Object.defineProperty(target, key, descriptor);
        }
    }
    let prototype = Reflect.getPrototypeOf(source);
    Reflect.setPrototypeOf(target, prototype);
    return target;
}

Answer 32

我迟到了回答这个问题，但我还有另一种克隆对象的方法：

   function cloneObject(obj) {
        if (obj === null || typeof(obj) !== 'object')
            return obj;
        var temp = obj.constructor(); // changed
        for (var key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                obj['isActiveClone'] = null;
                temp[key] = cloneObject(obj[key]);
                delete obj['isActiveClone'];
            }
        }
        return temp;
    }



var b = cloneObject({"a":1,"b":2});   // calling

然后更好更快：

var a = {"a":1,"b":2};
var b = JSON.parse(JSON.stringify(a));

和

var a = {"a":1,"b":2};

// Deep copy
var newObject = jQuery.extend(true, {}, a);

我已对代码进行了基准测试，您可以测试结果here：

并分享结果：参考文献：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

Answer 33

我使用npm克隆库。显然它也适用于浏览器。

https://www.npmjs.com/package/clone

let a = clone(b)

Answer 34

Lodash有一个能够为你处理的功能。

var foo = {a: 'a', b: {c:'d', e: {f: 'g'}}};

var bar = _.cloneDeep(foo);
// bar = {a: 'a', b: {c:'d', e: {f: 'g'}}}

阅读文档here。

Answer 35

单行ECMAScript 6解决方案（未处理Date / Regex等特殊对象类型）：

const clone = (o) =>
  typeof o === 'object' && o !== null ?      // only clone objects
  (Array.isArray(o) ?                        // if cloning an array
    o.map(e => clone(e)) :                   // clone each of its elements
    Object.keys(o).reduce(                   // otherwise reduce every key in the object
      (r, k) => (r[k] = clone(o[k]), r), {}  // and save its cloned value into a new object
    )
  ) :
  o;                                         // return non-objects as is

var x = {
  nested: {
    name: 'test'
  }
};

var y = clone(x);

console.log(x.nested !== y.nested);

Answer 36

ES 2017示例：

let objectToCopy = someObj;
let copyOfObject = {};
Object.defineProperties(copyOfObject, Object.getOwnPropertyDescriptors(objectToCopy));
// copyOfObject will now be the same as objectToCopy

Answer 37

使用今天的JavaScript克隆对象：ECMAScript 2015 （以前称为ECMAScript 6）

var original = {a: 1};

// Method 1: New object with original assigned.
var copy1 = Object.assign({}, original);

// Method 2: New object with spread operator assignment.
var copy2 = {...original};

旧浏览器可能不支持ECMAScript 2015.一个常见的解决方案是使用像Babel这样的JavaScript到JavaScript编译器来输出ECMAScript 5版本的JavaScript代码。

作为pointed out by @jim-hall，这只是一个浅层副本。属性的属性被复制为引用：更改属性将更改另一个对象/实例中的值。

Answer 38

我通常使用var newObj = JSON.parse( JSON.stringify(oldObje) );但是，这是一个更正确的方法：

var o = {};

var oo = Object.create(o);

(o === oo); // => false

关注旧版浏览器！

Answer 39

对于浅表副本，ECMAScript2018标准中引入了一种很棒的简单方法。它涉及到 Spread运算符的使用：

if ($unlockcourse == false && $mycourse == 1) {

我已经在Chrome浏览器中对其进行了测试，两个对象都存储在不同的位置，因此在两个对象中更改立即子值都不会更改另一个。尽管（在示例中）更改let obj = {a : "foo", b:"bar" , c:10 , d:true , e:[1,2,3] }; let objClone = { ...obj };中的值将同时影响两个副本。

这种技术非常简单直接。我一劳永逸地认为这是一个真正的最佳实践。

Answer 40

这是我创建的最快的方法，不使用原型，因此它将在新对象中维护hasOwnProperty。

解决方案是迭代原始对象的顶级属性，制作两个副本，从原始对象中删除每个属性，然后重置原始对象并返回新副本。它只需要与顶级属性一样多次迭代。这将保存所有if条件，以检查每个属性是否为函数，对象，字符串等，并且不必迭代每个后代属性。

唯一的缺点是原始对象必须提供其原始创建的命名空间，以便重置它。

copyDeleteAndReset:function(namespace,strObjName){
    var obj = namespace[strObjName],
    objNew = {},objOrig = {};
    for(i in obj){
        if(obj.hasOwnProperty(i)){
            objNew[i] = objOrig[i] = obj[i];
            delete obj[i];
        }
    }
    namespace[strObjName] = objOrig;
    return objNew;
}

var namespace = {};
namespace.objOrig = {
    '0':{
        innerObj:{a:0,b:1,c:2}
    }
}

var objNew = copyDeleteAndReset(namespace,'objOrig');
objNew['0'] = 'NEW VALUE';

console.log(objNew['0']) === 'NEW VALUE';
console.log(namespace.objOrig['0']) === innerObj:{a:0,b:1,c:2};

Answer 41

在JavaScript中，您可以像
那样编写deepCopy方法

function deepCopy(src) {
  let target = Array.isArray(src) ? [] : {};
  for (let prop in src) {
    let value = src[prop];
    if(value && typeof value === 'object') {
      target[prop] = deepCopy(value);
  } else {
      target[prop] = value;
  }
 }
    return target;
}

Answer 42

Promise完成异步对象克隆怎么办？

async function clone(thingy /**/)
{
    if(thingy instanceof Promise)
    {
        throw Error("This function cannot clone Promises.");
    }
    return thingy;
}

Answer 43

这是我使用ES2015默认值和传播运算符

深度克隆对象的方法

 const makeDeepCopy = (obj, copy = {}) => {
  for (let item in obj) {
    if (typeof obj[item] === 'object') {
      makeDeepCopy(obj[item], copy)
    }
    if (obj.hasOwnProperty(item)) {
      copy = {
        ...obj
      }
    }
  }
  return copy
}

＆＃13;

const testObj = {
  "type": "object",
  "properties": {
    "userId": {
      "type": "string",
      "chance": "guid"
    },
    "emailAddr": {
      "type": "string",
      "chance": {
        "email": {
          "domain": "fake.com"
        }
      },
      "pattern": ".+@fake.com"
    }
  },
  "required": [
    "userId",
    "emailAddr"
  ]
}

const makeDeepCopy = (obj, copy = {}) => {
  for (let item in obj) {
    if (typeof obj[item] === 'object') {
      makeDeepCopy(obj[item], copy)
    }
    if (obj.hasOwnProperty(item)) {
      copy = {
        ...obj
      }
    }
  }
  return copy
}

console.log(makeDeepCopy(testObj))

＆＃13;

Answer 44

为了将来参考，ECMAScript 6的当前草案引入了Object.assign作为克隆对象的方法。示例代码为：

var obj1 = { a: true, b: 1 };
var obj2 = Object.assign(obj1);
console.log(obj2); // { a: true, b: 1 }

在撰写support is limited to Firefox 34 in browsers时，它尚未在生产代码中使用（除非您当然正在编写Firefox扩展程序）。

Answer 45

实现此目的的方法有很多，但如果您想在没有任何库的情况下执行此操作，则可以使用以下方法：

const cloneObject = (oldObject) => {
  let newObject = oldObject;
  if (oldObject && typeof oldObject === 'object') {
    if(Array.isArray(oldObject)) {
      newObject = [];
    } else if (Object.prototype.toString.call(oldObject) === '[object Date]' && !isNaN(oldObject)) {
      newObject = new Date(oldObject.getTime());
    } else {
      newObject = {};
      for (let i in oldObject) {
        newObject[i] = cloneObject(oldObject[i]);
      }
    }

  }
  return newObject;
}

让我知道你的想法。

Answer 46

根据我的经验，递归版本的性能大大优于JSON.parse(JSON.stringify(obj))。这是现代化的递归深层对象复制功能，可以放在一行上：

function deepCopy(obj) {
  return Object.keys(obj).reduce((v, d) => Object.assign(v, {
    [d]: (obj[d].constructor === Object) ? deepCopy(obj[d]) : obj[d]
  }), {});
}

与JSON.parse...方法相比，此方法执行的是40 times faster。

Answer 47

2019年我正在使用：

deepCopy(object) {
  const getCircularReplacer = () => {
    const seen = new WeakSet();
    return (key, value) => {
      if(typeof value === 'object' && value !== null) {
        if(seen.has(value)) return;
        seen.add(value);
      }
      return value;
    };
  };
  return JSON.parse(JSON.stringify(object, getCircularReplacer()));
}

const theCopy = deepCopy(originalObject);

Answer 48

有很多答案，但没有一个能给我所需要的效果。我想利用jQuery深层拷贝的强大功能......但是，当它运行到一个数组时，它只是复制对数组的引用并深入复制其中的项目。为了解决这个问题，我做了一个很好的小递归函数，它将自动创建一个新的数组。

（如果你想要它，它甚至会检查kendo.data.ObservableArray！尽管如此，如果你想再次观察Arrays，请确保你调用kendo.observable（newItem）。）

因此，要完全复制现有项目，您只需执行以下操作：

var newItem = jQuery.extend(true, {}, oldItem);
createNewArrays(newItem);


function createNewArrays(obj) {
    for (var prop in obj) {
        if ((kendo != null && obj[prop] instanceof kendo.data.ObservableArray) || obj[prop] instanceof Array) {
            var copy = [];
            $.each(obj[prop], function (i, item) {
                var newChild = $.extend(true, {}, item);
                createNewArrays(newChild);
                copy.push(newChild);
            });
            obj[prop] = copy;
        }
    }
}

Answer 49

如果您想要推广对象克隆算法，我认为这是最佳解决方案它可以与jQuery一起使用，也可以不与jQuery一起使用，但是如果你希望你克隆的对象与原始对象具有相同的“类”，我建议不要使用jQuery的extend方法。

function clone(obj){
    if(typeof(obj) == 'function')//it's a simple function
        return obj;
    //of it's not an object (but could be an array...even if in javascript arrays are objects)
    if(typeof(obj) !=  'object' || obj.constructor.toString().indexOf('Array')!=-1)
        if(JSON != undefined)//if we have the JSON obj
            try{
                return JSON.parse(JSON.stringify(obj));
            }catch(err){
                return JSON.parse('"'+JSON.stringify(obj)+'"');
            }
        else
            try{
                return eval(uneval(obj));
            }catch(err){
                return eval('"'+uneval(obj)+'"');
            }
    // I used to rely on jQuery for this, but the "extend" function returns
    //an object similar to the one cloned,
    //but that was not an instance (instanceof) of the cloned class
    /*
    if(jQuery != undefined)//if we use the jQuery plugin
        return jQuery.extend(true,{},obj);
    else//we recursivley clone the object
    */
    return (function _clone(obj){
        if(obj == null || typeof(obj) != 'object')
            return obj;
        function temp () {};
        temp.prototype = obj;
        var F = new temp;
        for(var key in obj)
            F[key] = clone(obj[key]);
        return F;
    })(obj);            
}

Answer 50

由于递归对于JavaScript而言过于昂贵，而且我发现的大多数答案都是使用递归，而JSON方法将跳过非JSON可转换部分（函数等）。所以我做了一点研究，发现这种蹦床技术可以避免它。这是代码：

/*
 * Trampoline to avoid recursion in JavaScript, see:
 *     http://www.integralist.co.uk/posts/js-recursion.html
 */
function trampoline() {
    var func = arguments[0];
    var args = [];
    for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i];
    }

    var currentBatch = func.apply(this, args);
    var nextBatch = [];

    while (currentBatch && currentBatch.length > 0) {
        currentBatch.forEach(function(eachFunc) {
            var ret = eachFunc();
            if (ret && ret.length > 0) {
                nextBatch = nextBatch.concat(ret);
            }
        });

        currentBatch = nextBatch;
        nextBatch = [];
    }
};

/*
 *  Deep clone an object using the trampoline technique.
 *
 *  @param target {Object} Object to clone
 *  @return {Object} Cloned object.
 */
function clone(target) {
    if (typeof target !== 'object') {
        return target;
    }
    if (target == null || Object.keys(target).length == 0) {
        return target;
    }

    function _clone(b, a) {
        var nextBatch = [];
        for (var key in b) {
            if (typeof b[key] === 'object' && b[key] !== null) {
                if (b[key] instanceof Array) {
                    a[key] = [];
                }
                else {
                    a[key] = {};
                }
                nextBatch.push(_clone.bind(null, b[key], a[key]));
            }
            else {
                a[key] = b[key];
            }
        }
        return nextBatch;
    };

    var ret = target instanceof Array ? [] : {};
    (trampoline.bind(null, _clone))(target, ret);
    return ret;
};

另见这个要点： https://gist.github.com/SeanOceanHu/7594cafbfab682f790eb

Answer 51

这是我的对象克隆版本。这是jQuery方法的独立版本，只需要很少的调整和调整。查看fiddle。我已经使用了很多jQuery，直到有一天我意识到我大部分时间都只使用这个函数x_x。

用法与jQuery API中描述的相同：

非深度克隆：extend(object_dest, object_source);
深度克隆：extend(true, object_dest, object_source);

一个额外的函数用于定义对象是否适合克隆。

/**
 * This is a quasi clone of jQuery's extend() function.
 * by Romain WEEGER for wJs library - www.wexample.com
 * @returns {*|{}}
 */
function extend() {
    // Make a copy of arguments to avoid JavaScript inspector hints.
    var to_add, name, copy_is_array, clone,

    // The target object who receive parameters
    // form other objects.
    target = arguments[0] || {},

    // Index of first argument to mix to target.
    i = 1,

    // Mix target with all function arguments.
    length = arguments.length,

    // Define if we merge object recursively.
    deep = false;

    // Handle a deep copy situation.
    if (typeof target === 'boolean') {
        deep = target;

        // Skip the boolean and the target.
        target = arguments[ i ] || {};

        // Use next object as first added.
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if (typeof target !== 'object' && typeof target !== 'function') {
        target = {};
    }

    // Loop trough arguments.
    for (false; i < length; i += 1) {

        // Only deal with non-null/undefined values
        if ((to_add = arguments[ i ]) !== null) {

            // Extend the base object.
            for (name in to_add) {

                // We do not wrap for loop into hasOwnProperty,
                // to access to all values of object.
                // Prevent never-ending loop.
                if (target === to_add[name]) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays.
                if (deep && to_add[name] && (is_plain_object(to_add[name]) || (copy_is_array = Array.isArray(to_add[name])))) {
                    if (copy_is_array) {
                        copy_is_array = false;
                        clone = target[name] && Array.isArray(target[name]) ? target[name] : [];
                    }
                    else {
                        clone = target[name] && is_plain_object(target[name]) ? target[name] : {};
                    }

                    // Never move original objects, clone them.
                    target[name] = extend(deep, clone, to_add[name]);
                }

                // Don't bring in undefined values.
                else if (to_add[name] !== undefined) {
                    target[name] = to_add[name];
                }
            }
        }
    }
    return target;
}

/**
 * Check to see if an object is a plain object
 * (created using "{}" or "new Object").
 * Forked from jQuery.
 * @param obj
 * @returns {boolean}
 */
function is_plain_object(obj) {
    // Not plain objects:
    // - Any object or value whose internal [[Class]] property is not "[object Object]"
    // - DOM nodes
    // - window
    if (obj === null || typeof obj !== "object" || obj.nodeType || (obj !== null && obj === obj.window)) {
        return false;
    }
    // Support: Firefox <20
    // The try/catch suppresses exceptions thrown when attempting to access
    // the "constructor" property of certain host objects, i.e. |window.location|
    // https://bugzilla.mozilla.org/show_bug.cgi?id=814622
    try {
        if (obj.constructor && !this.hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf")) {
            return false;
        }
    }
    catch (e) {
        return false;
    }

    // If the function hasn't returned already, we're confident that
    // |obj| is a plain object, created by {} or constructed with new Object
    return true;
}

Answer 52

如果不触及原型继承，您可以按如下方式深入了解对象和数组;

function objectClone(o){
  var ot = Array.isArray(o);
  return o !== null && typeof o === "object" ? Object.keys(o)
                                                     .reduce((r,k) => o[k] !== null && typeof o[k] === "object" ? (r[k] = objectClone(o[k]),r)
                                                                                                                : (r[k] = o[k],r), ot ? [] : {})
                                             : o;
}
var obj = {a: 1, b: {c: 2, d: {e: 3, f: {g: 4, h: null}}}},
    arr = [1,2,[3,4,[5,6,[7]]]],
    nil = null,
  clobj = objectClone(obj),
  clarr = objectClone(arr),
  clnil = objectClone(nil);
console.log(clobj, obj === clobj);
console.log(clarr, arr === clarr);
console.log(clnil, nil === clnil);
clarr[2][2][2] = "seven";
console.log(arr, clarr);

Answer 53

Object.assign({},sourceObj)仅在对象的属性没有引用类型键的情况下才克隆对象。

obj={a:"lol",b:["yes","no","maybe"]}
clonedObj = Object.assign({},obj);

clonedObj.b.push("skip")// changes will reflected to the actual obj as well because of its reference type.
obj.b //will also console => yes,no,maybe,skip

因此无法以这种方式实现深度克隆。

最有效的解决方案是

var obj = Json.stringify(yourSourceObj)
var cloned = Json.parse(obj);

Answer 54

class Handler {
  static deepCopy (obj) {
    if (Object.prototype.toString.call(obj) === '[object Array]') {
      const result = [];
      
      for (let i = 0, len = obj.length; i < len; i++) {
        result[i] = Handler.deepCopy(obj[i]);
      }
      return result;
    } else if (Object.prototype.toString.call(obj) === '[object Object]') {
      const result = {};
      for (let prop in obj) {
        result[prop] = Handler.deepCopy(obj[prop]);
      }
      return result;
    }
    return obj;
  }
}

Answer 55

为了将来参考，可以使用此代码

ES6：

function clone(obj){
let newObj = {};
for(let i in obj){
    if(typeof(obj[i]) === 'object' && Object.keys(obj[i]).length){
        newObj[i] = clone(obj[i]);
    } else{
        newObj[i] = obj[i];
    }
}
return Object.assign({},newObj);

ES5：

var obj ={a:{b:1,c:3},d:4,e:{f:6}}
var xc = clone(obj);
console.log(obj); //{a:{b:1,c:3},d:4,e:{f:6}}
console.log(xc); //{a:{b:1,c:3},d:4,e:{f:6}}

xc.a.b = 90;
console.log(obj); //{a:{b:1,c:3},d:4,e:{f:6}}
console.log(xc); //{a:{b:90,c:3},d:4,e:{f:6}}

}

E.g

href

Answer 56

这是递归的解决方案：

    [AllowAnonymous]

Answer 57

希望这会有所帮助。

function deepClone(obj) {
    /*
     * Duplicates an object 
     */

    var ret = null;
    if (obj !== Object(obj)) { // primitive types
        return obj;
    }
    if (obj instanceof String || obj instanceof Number || obj instanceof Boolean) { // string objecs
        ret = obj; // for ex: obj = new String("Spidergap")
    } else if (obj instanceof Date) { // date
        ret = new obj.constructor();
    } else
        ret = Object.create(obj.constructor.prototype);

    var prop = null;
    var allProps = Object.getOwnPropertyNames(obj); //gets non enumerables also


    var props = {};
    for (var i in allProps) {
        prop = allProps[i];
        props[prop] = false;
    }

    for (i in obj) {
        props[i] = i;
    }

    //now props contain both enums and non enums 
    var propDescriptor = null;
    var newPropVal = null; // value of the property in new object
    for (i in props) {
        prop = obj[i];
        propDescriptor = Object.getOwnPropertyDescriptor(obj, i);

        if (Array.isArray(prop)) { //not backward compatible
            prop = prop.slice(); // to copy the array
        } else
        if (prop instanceof Date == true) {
            prop = new prop.constructor();
        } else
        if (prop instanceof Object == true) {
            if (prop instanceof Function == true) { // function
                if (!Function.prototype.clone) {
                    Function.prototype.clone = function() {
                        var that = this;
                        var temp = function tmp() {
                            return that.apply(this, arguments);
                        };
                        for (var ky in this) {
                            temp[ky] = this[ky];
                        }
                        return temp;
                    }
                }
                prop = prop.clone();

            } else // normal object 
            {
                prop = deepClone(prop);
            }

        }

        newPropVal = {
            value: prop
        };
        if (propDescriptor) {
            /*
             * If property descriptors are there, they must be copied
             */
            newPropVal.enumerable = propDescriptor.enumerable;
            newPropVal.writable = propDescriptor.writable;

        }
        if (!ret.hasOwnProperty(i)) // when String or other predefined objects
            Object.defineProperty(ret, i, newPropVal); // non enumerable

    }
    return ret;
}

https://github.com/jinujd/Javascript-Deep-Clone

Answer 58

需要新的浏览器，但是......

让我们扩展原生对象并获得真实 .extend();

Object.defineProperty(Object.prototype, 'extend', {
    enumerable: false,
    value: function(){
        var that = this;

        Array.prototype.slice.call(arguments).map(function(source){
            var props = Object.getOwnPropertyNames(source),
                i = 0, l = props.length,
                prop;

            for(; i < l; ++i){
                prop = props[i];

                if(that.hasOwnProperty(prop) && typeof(that[prop]) === 'object'){
                    that[prop] = that[prop].extend(source[prop]);
                }else{
                    Object.defineProperty(that, prop, Object.getOwnPropertyDescriptor(source, prop));
                }
            }
        });

        return this;
    }
});

只需在对象上使用.extend（）的任何代码之前弹出它。

示例：

var obj1 = {
    node1: '1',
    node2: '2',
    node3: 3
};

var obj2 = {
    node1: '4',
    node2: 5,
    node3: '6'
};

var obj3 = ({}).extend(obj1, obj2);

console.log(obj3);
// Object {node1: "4", node2: 5, node3: "6"}

Answer 59

当您的对象嵌套并且包含数据对象，其他结构化对象或某些属性对象等时，则无法使用JSON.parse(JSON.stringify(object))或Object.assign({}, obj)或$.extend(true, {}, obj)。在这种情况下，请使用lodash。简单又容易。

var obj = {a: 25, b: {a: 1, b: 2}, c: new Date(), d: anotherNestedObject };
var A = _.cloneDeep(obj);

现在A将是您的obj的新克隆，没有任何引用。

Answer 60

如果您发现自己定期进行此类操作（例如，创建撤消重做功能），可能值得研究Immutable.js

const map1 = Immutable.fromJS( { a: 1, b: 2, c: { d: 3 } } );
const map2 = map1.setIn( [ 'c', 'd' ], 50 );

console.log( `${ map1.getIn( [ 'c', 'd' ] ) } vs ${ map2.getIn( [ 'c', 'd' ] ) }` ); // "3 vs 50"

https://codepen.io/anon/pen/OBpqNE?editors=1111

Answer 61

使用Object.create()获取prototype并支持instanceof，并使用for()循环获取可枚举键：

function cloneObject(source) {
    var key,value;
    var clone = Object.create(source);

    for (key in source) {
        if (source.hasOwnProperty(key) === true) {
            value = source[key];

            if (value!==null && typeof value==="object") {
                clone[key] = cloneObject(value);
            } else {
                clone[key] = value;
            }
        }
    }

    return clone;
}

Answer 62

这是我的解决方案，不使用任何库或本机javascript函数。

function deepClone(obj) {
  if (typeof obj !== "object") {
    return obj;
  } else {
    let newObj =
      typeof obj === "object" && obj.length !== undefined ? [] : {};
    for (let key in obj) {
      if (key) {
        newObj[key] = deepClone(obj[key]);
      }
    }
    return newObj;
  }
}

Answer 63

我的情况有些不同。我有一个带有嵌套对象和函数的对象。因此，Object.assign()和JSON.stringify()不能解决我的问题。使用第三方库对我来说也不是一种选择。

因此，我决定制作一个简单的函数，使用内置方法来复制具有其文字属性，嵌套对象和函数的对象。

let deepCopy = (target, source) => {
    Object.assign(target, source);
    // check if there's any nested objects
    Object.keys(source).forEach((prop) => {
        /**
          * assign function copies functions and
          * literals (int, strings, etc...)
          * except for objects and arrays, so:
          */
        if (typeof(source[prop]) === 'object') {
            // check if the item is, in fact, an array
            if (Array.isArray(source[prop])) {
                // clear the copied referenece of nested array
                target[prop] = Array();
                // iterate array's item and copy over
                source[prop].forEach((item, index) => {
                    // array's items could be objects too!
                    if (typeof(item) === 'object') {
                        // clear the copied referenece of nested objects
                        target[prop][index] = Object();
                        // and re do the process for nested objects
                        deepCopy(target[prop][index], item);
                    } else {
                        target[prop].push(item);
                    }
                });
            // otherwise, treat it as an object
            } else {
                // clear the copied referenece of nested objects
                target[prop] = Object();
                // and re do the process for nested objects
                deepCopy(target[prop], source[prop]);
            }
        }
    });
};

这是一个测试代码：

let a = {
    name: 'Human', 
    func: () => {
        console.log('Hi!');
    }, 
    prop: {
        age: 21, 
        info: {
            hasShirt: true, 
            hasHat: false
        }
    },
    mark: [89, 92, { exam: [1, 2, 3] }]
};

let b = Object();

deepCopy(b, a);

a.name = 'Alien';
a.func = () => { console.log('Wassup!'); };
a.prop.age = 1024;
a.prop.info.hasShirt = false;
a.mark[0] = 87;
a.mark[1] = 91;
a.mark[2].exam = [4, 5, 6];

console.log(a); // updated props
console.log(b);

对于效率相关的问题，我认为这是解决我所遇到问题的最简单，最有效的方法。对于此算法可以提高效率的任何评论，我将不胜感激。

Answer 64

根据新方法Object.fromEntries()的建议，某些浏览器的新版本（reference）支持该方法。我想为下一种递归方法做出贡献：

import java.util.Arrays;
import java.util.Random;

public class TimedSortOne
{

    public static int[] anArray; // initializes the first array
    public static int[] arrayB; // initializes the second array

    /**
      * This method produces integers of random values.
      * @return int randomNum
      */
    private static int randomFill()
    {       
        Random rand = new Random();
        int randomNum = rand.nextInt();
        return randomNum;        
    }

    private static int[] list()
    {
        anArray = new int[1000];
        for(int i=0;i<anArray.length;i++)
        {
            anArray[i] = randomFill();
        }
        return anArray;
    }

    /**
     * This method sorts the values of anArray into ascending order by 
     * repeatedly finding the largest value and moving
     * it to the last index in the array.
     * @param int[] anArray
     */
    private static void selectionSort(int[] anArray)
    {

        for (int lastPlace = anArray.length-1; lastPlace > 0; lastPlace--)
        {
            int maxLoc = 0;

            for (int j = 1; j <= lastPlace; j++)
            {
                if (anArray[j] > anArray[maxLoc]) 
                {
                    maxLoc = j;
                }
            }

            int temp = anArray[maxLoc];
            anArray[maxLoc] = anArray[lastPlace];
            anArray[lastPlace] = temp;

        }
    }


    /**
     * This method populates arrayB with an exact copy
     * of integer values from anArray using System.arraycopy() function.
     * @param anArray
     * @return arrayB
     */
    private static int[] arrayCopyFull(int[] anArray)
    {
        int[] temp = new int[anArray.length];
        System.arraycopy(anArray, 0, temp, 0, anArray.length);
        return temp;
    }

    public static void main(String[] args)
    {

        list();
        arrayCopyFull(anArray);
        selectionSort(anArray);
        System.out.println("The sorted integers in  anArray are:");
            for (int numbers : anArray) {
             System.out.println(numbers);
            }

        System.out.println("The sorted integers in arrayB are:");
            for (int bNumbers : arrayB) {
               System.out.println(bNumbers);
            }
    }

}

Random rnd= new Random();
Scanner input= new Scanner(System.in);

System.out.println("enter the number of row");
                    int rows=input.nextInt();

System.out.println("enter the number of columns");
int columns=input.nextInt();  

double [][] array=new double [rows][columns];

PrintWriter outputFile= new PrintWriter ("D:\\routes.txt");

double min=0.0;
double max=100.0; 
double maxx= (Math.random() * ((max - min) + 1)) + min;

for (int row=0; row<rows ; row++)
    {   System.out.println(array[rows][columns]);
        for (int col=0; col<columns; col++)
        {              
            array[row][col]=maxx;

            System.out.println(array[row][col]);
            outputFile.println(array[row][col]);           
        }            
    }           
outputFile.close();
}

Answer 65

由于这个问题引起了很多关注和回答，参考了内置功能，如Object.assign或深度克隆的自定义代码，我想分享一些库进行深度克隆，

<强> 1。 esclone

npm install --savedev esclone https://www.npmjs.com/package/esclone

在ES6中使用示例：

import esclone from "esclone"; const rockysGrandFather = { name: "Rockys grand father", father: "Don't know :(" }; const rockysFather = { name: "Rockys Father", father: rockysGrandFather }; const rocky = { name: "Rocky", father: rockysFather }; const rockyClone = esclone(rocky);

在ES5中使用示例：

var esclone = require("esclone") var foo = new String("abcd") var fooClone = esclone.default(foo) console.log(fooClone) console.log(foo === fooClone)

<强> 2。深层复制

npm install deep-copy https://www.npmjs.com/package/deep-copy

示例：

var dcopy = require('deep-copy')

// deep copy object 
var copy = dcopy({a: {b: [{c: 5}]}})

// deep copy array 
var copy = dcopy([1, 2, {a: {b: 5}}])

第3。克隆深

$ npm install --save clone-deep https://www.npmjs.com/package/clone-deep

示例：

var cloneDeep = require('clone-deep'); var obj = {a: 'b'}; var arr = [obj]; var copy = cloneDeep(arr); obj.c = 'd'; console.log(copy); //=> [{a: 'b'}] console.log(arr);

Answer 66

function clone(obj) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

使用以下方法代替JSON.parse(JSON.stringify(obj))，因为它比以下方法慢

How do I correctly clone a JavaScript object?

Answer 67

有3种不同的方法可以在Javascript中克隆对象。

1：使用迭代进行深层复制

function iterationCopy(src) {
  let target = {};
  for (let prop in src) {
    if (src.hasOwnProperty(prop)) {
      target[prop] = src[prop];
    }
  }
  return target;
}
const source = {a:1, b:2, c:3};
const target = iterationCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1

如您所见，它正在工作！

现在，让我们来关注第二种解决方案，它确实更优雅，但是使用范围更有限。

2：转换回JSON

function jsonCopy(src) {
  return JSON.parse(JSON.stringify(src));
}
const source = {a:1, b:2, c:3};
const target = jsonCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1

注意：使用此方法时要小心，因为您的源对象必须是JSON安全的。因此，在源对象无法转换为JSON的情况下，可能需要某种异常处理来确保安全。

3：使用Object.assign

更新：此方法有一个缺陷，即它仅执行浅表复制。这意味着嵌套属性仍将通过引用复制。小心点。

这种方式是我个人在项目中使用的最好和最安全的方式。它利用Object对象上的内置静态方法，并由该语言处理和提供。所以用这个吧！

function bestCopyEver(src) {
  return Object.assign({}, src);
}
const source = {a:1, b:2, c:3};
const target = bestCopyEver(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1

Answer 68

您可以使用Spread运算符在JavaScript中克隆对象。

//做concat工作的传播操作员

let arr = [1,2,3];  let arr2 = [4,5];  arr = [...arr,...arr2]; console.log(arr);

Answer 69

如何将对象的键与其值合并？

function deepClone(o) {
    var keys = Object.keys(o);
    var values = Object.values(o);

    var clone = {};

    keys.forEach(function(key, i) {
        clone[key] = typeof values[i] == 'object' ? Object.create(values[i]) : values[i];
    });

    return clone;
}

注意： 此方法不一定会进行浅拷贝，但它只会复制一个内部对象的深度，这意味着当您获得类似{a: {b: {c: null}}}，它只会克隆直接位于其中的对象，因此，deepClone(a.b).c从技术上是对a.b.c的引用，而deepClone(a).b是一个克隆，不是参考。

Answer 70

保持超级简单（KISS）：

如果有object，则（理想情况下）应该有constructor。如果您没有constructor的{{1}}；我觉得，您应该先创建object 第一。

确定，现在克隆对象：

constructor

情况二：：如果要克隆的对象不是带有其function SampleObjectConstructor(config) { this.greet = config.greet; } // custom-object's prototype method SampleObjectConstructor.prototype.showGreeting = function(){ alert(this.greet); } var originalObject = new SampleObjectConstructor({greet: 'Hi!'}); var clonedObj = new SampleObjectConstructor(originalObject); console.log(originalObject); // SampleObjectConstructor {greet: "Hi!"} console.log('clonedObj : ', clonedObj) // SampleObjectConstructor {greet: "Hi!"} console.log('cloned successfully?', originalObject !== clonedObj); // cloned successfully? true的{{1}}；内置的custom object也可以正常工作，即prototype methods将为您object constructor - Object。在这种情况下，您甚至不需要编写自己的new Object(originalObject)。

clone the original object

祝你好运...

Answer 71

如果您使用的是es6，则只需使用传播运算符即可。

let a = {id:1, name:'sample_name'}
let b = {...a};

Answer 72

就我的目的而言，从现有对象（克隆）创建新对象的最优雅方式是使用JavaScript＆＃39; assign＆＃39;对象功能。

foo = {bar: 10, baz: {quox: 'batman'}};

clonedObject = Object.assign(foo);

clonedObject现在是foo的副本。我不知道细节的工作情况，或者深层次的细节。 copy是，但我用它来组合对象的属性和其他对象。似乎也适用于克隆。

Answer 73

最佳和最新的克隆方法如下：

使用“...”ES6传播运算符例如：

var clonedObjArray = [...oldObjArray];

这样我们将数组扩展为单个值，并使用[]运算符将其放入一个新数组中。

这是一个较长的例子，显示了它的不同工作方式

let objArray = [ {a:1} , {b:2} ];

let refArray = objArray; // this will just point to the objArray
let clonedArray = [...objArray]; // will clone the array

console.log( "before:" );
console.log( "obj array" , objArray );
console.log( "ref array" , refArray );
console.log( "cloned array" , clonedArray );

objArray[0] = {c:3};

console.log( "after:" );
console.log( "obj array" , objArray ); // [ {c:3} , {b:2} ]
console.log( "ref array" , refArray ); // [ {c:3} , {b:2} ]
console.log( "cloned array" , clonedArray ); // [ {a:1} , {b:2} ]

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

74 个答案:

结构化克隆

Node.js支持：实验

浏览器的直接支持：可能最终？

异步解决方法：可用。

使用示例：

同步解决方法：太可怕了！

使用示例：

使用示例：

在一行代码中克隆（不深度克隆）对象的有效方法

AngularJS

保持超级简单（KISS）：