blocks|key|1746774|text|假设您的对象中只有变量而没有任何函数，您可以只使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1746775|var+newObject+=+JSON.parse(JSON.stringify(oldObject));|code-block|syntax|javascript|1746776|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Assuming that you have only variables and not any functions in your object, you can just use:

<pre><code>var newObject = JSON.parse(JSON.stringify(oldObject));
</code></pre>

blocks|key|1531612|text|如果没有任何内置的，你可以试试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531613|function+clone(obj)+{
++++if+(obj+===+null+%7C%7C+typeof+(obj)+!==+'object'+%7C%7C+'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;
}|code-block|syntax|javascript|1531614|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If there wasn't any builtin one, you could try:

<pre><code>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;
}
</code></pre>

blocks|key|1746666|text|这就是我正在使用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1746667|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;
}|code-block|syntax|javascript|1746668|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is what I'm using:

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

blocks|key|1746660|text|代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1746661|//+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+%7C%7C+typeof+from+!=+"object")+return+from;
++++if+(from.constructor+!=+Object+&&+from.constructor+!=+Array)+return+from;
++++if+(from.constructor+==+Date+%7C%7C+from.constructor+==+RegExp+%7C%7C+from.constructor+==+Function+%7C%7C
++++++++from.constructor+==+String+%7C%7C+from.constructor+==+Number+%7C%7C+from.constructor+==+Boolean)
++++++++return+new+from.constructor(from);

++++to+=+to+%7C%7C+new+from.constructor();

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

++++return+to;
}|code-block|syntax|javascript|1746662|测试：|1746663|var+obj+=
{
++++date:+new+Date(),
++++func:+function(q)+{+return+1+%2B+q;+},
++++num:+123,
++++text:+"asdasd",
++++array:+[1,+"asd"],
++++regex:+new+RegExp(/aaa/i),
++++subobj:
++++{
++++++++num:+234,
++++++++text:+"asdsaD"
++++}
}

var+clone+=+extend(obj);|1746664|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Code:

<pre><code>// 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 &amp;&amp; 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;
}
</code></pre>

Test:

<pre><code>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);
</code></pre>

blocks|key|1746670|text|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});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1746671|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var clone = function() {
 var newObj = (this instanceof Array) ? [] : {};
 for (var i in this) {
 if (this[i] &amp;&amp; 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});
</code></pre>

blocks|key|1747278|text|有一个library+(called+“clone”)，它能很好地做到这一点。据我所知，它提供了对任意对象的最完整的递归克隆/复制。它还支持循环引用，其他答案还没有涉及到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1747279|你也可以使用find+it+on+npm。它既可以用于浏览器，也可以用于Node.js。|1747280|下面是一个关于如何使用它的示例：|1747281|使用以下命令安装|1747282|npm+install+clone|code-block|syntax|javascript|1747283|或者用Ender打包。|1747284|ender+build+clone+[...]|1747285|您也可以手动下载源代码。|1747286|然后你就可以在源代码中使用它了。|1747287|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'+}+}|1747288|(免责声明:我是该库的作者。)|1747289|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/pvorb/node-clone|1|https://npmjs.org/package/clone|2|https://github.com/ender-js/Ender^0|3|O|0|0|6|E|1|0|0|0|0|3|5|2|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1M|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|Q|3|R|5|L|7|1R|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1S|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|1T|8|@]|9|@]|C|$]]|$1|W|3|X|5|L|7|1U|8|@]|9|@]|C|$M|N]]|$1|Y|3|Z|5|6|7|1V|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1W|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]|1A|$5|13|14|15|C|$16|1B]]]]

There’s a <a href="https://github.com/pvorb/node-clone" rel="noreferrer">library (called “clone”)</a>, that does this quite well. It provides the most complete recursive cloning/copying of arbitrary objects that I know of. It also supports circular references, which is not covered by the other answers, yet.

You can <a href="https://npmjs.org/package/clone" rel="noreferrer">find it on npm</a>, too. It can be used for the browser as well as Node.js.

Here is an example on how to use it:

Install it with

<pre><code>npm install clone
</code></pre>

or package it with <a href="https://github.com/ender-js/Ender" rel="noreferrer">Ender</a>.

<pre><code>ender build clone [...]
</code></pre>

You can also download the source code manually.

Then you can use it in your source code.

<pre><code>var clone = require('clone');

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

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

(Disclaimer: I’m the author of the library.)

blocks|key|1747024|text|我知道这是一个古老的帖子，但我想这可能会对下一个跌跌撞撞的人有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747025|只要你不给任何对象赋值，它就不会在内存中维护引用。因此，要创建一个想要在其他对象之间共享的对象，您必须创建一个工厂，如下所示：|1747026|var+a+=+function(){
++++return+{
++++++++father:'zacharias'
++++};
},
b+=+a(),
c+=+a();
c.father+=+'johndoe';
alert(b.father);|code-block|syntax|javascript|1747027|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I know this is an old post, but I thought this may be of some help to the next person who stumbles along.

As long as you don't assign an object to anything it maintains no reference in memory. So to make an object that you want to share among other objects, you'll have to create a factory like so:

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

blocks|key|1747077|text|如果您正在使用它，那么Underscore.js库就有一个clone方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1747078|var+newObject+=+_.clone(oldObject);|code-block|syntax|javascript|1747079|entityMap|0|LINK|mutability|MUTABLE|url|https://underscorejs.org/|1|https://underscorejs.org/#clone^0|B|D|0|T|5|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

If you're using it, the <a href="https://underscorejs.org/" rel="nofollow noreferrer">Underscore.js</a> library has a <a href="https://underscorejs.org/#clone" rel="nofollow noreferrer">clone</a> method.
<pre><code>var newObject = _.clone(oldObject);
</code></pre>

blocks|key|1747768|text|下面的代码创建了同一对象的两个实例。我找到了它，目前正在使用它。它简单易用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747769|var+objToCreate+=+JSON.parse(JSON.stringify(cloneThis));|code-block|syntax|javascript|1747770|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The following creates two instances of the same object. I found it and am using it currently. It's simple and easy to use.

<pre><code>var objToCreate = JSON.parse(JSON.stringify(cloneThis));
</code></pre>

blocks|key|1532463|text|Lodash有一个很好的_.cloneDeep(value)方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1532464|var+objects+=+[{+'a':+1+},+{+'b':+2+}];

var+deep+=+_.cloneDeep(objects);
console.log(deep[0]+===+objects[0]);
//+=>+false|code-block|syntax|javascript|1532465|entityMap|0|LINK|mutability|MUTABLE|url|http://lodash.com/docs#cloneDeep^0|C|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Lodash has a nice <a href="http://lodash.com/docs#cloneDeep" rel="noreferrer">_.cloneDeep(value)</a> method:

<pre><code>var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// =&gt; false
</code></pre>

blocks|key|1531635|text|function+clone(obj)
+{+var+clone+=+{};
+++clone.prototype+=+obj.prototype;
+++for+(property+in+obj)+clone[property]+=+obj[property];
+++return+clone;
+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1531636|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function clone(obj)
 { var clone = {};
 clone.prototype = obj.prototype;
 for (property in obj) clone[property] = obj[property];
 return clone;
 }
</code></pre>

blocks|key|1532131|text|浅层复制一行(ECMAScript+5th+edition)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1532132|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|code-block|syntax|javascript|1532133|和浅层复制一行(ECMAScript+6th+edition，2015)：|1532134|var+origin+=+{+foo+:+{}+};
var+copy+=+Object.assign({},+origin);

console.log(origin,+copy);
console.log(origin+==+copy);+//+false
console.log(origin.foo+==+copy.foo);+//+true|1532135|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/ECMAScript#5th_Edition|1|https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%25E2%2580%2593_ECMAScript_2015^0|7|M|0|0|0|8|M|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Shallow copy one-liner (<a href="https://en.wikipedia.org/wiki/ECMAScript#5th_Edition" rel="nofollow noreferrer">ECMAScript 5th edition</a>):
<pre><code>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
</code></pre>
And shallow copy one-liner (<a href="https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015" rel="nofollow noreferrer">ECMAScript 6th edition</a>, 2015):
<pre><code>var origin = { foo : {} };
var copy = Object.assign({}, origin);

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true
</code></pre>

blocks|key|1746728|text|对于类似数组的对象，似乎还没有理想的深度克隆操作符。如下面的代码所示，John+Resig的jQuery克隆程序将具有非数字属性的数组转换为不是数组的对象，RegDwight的JSON克隆程序删除了非数字属性。以下测试说明了多个浏览器上的这些点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1746729|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?"+%2B+(arrayLikeObj+instanceof+Array)+%2B
++++++"\nIs+the+jQueryClone+an+array+instance?+"+%2B+(jQueryCopy+instanceof+Array)+%2B
++++++"\nWhat+are+the+arrayLikeObj+names?+"+%2B+arrayLikeObj.names+%2B
++++++"\nAnd+what+are+the+JSONClone+names?+"+%2B+JSONCopy.names)|code-block|syntax|javascript|1746730|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There seems to be no ideal deep clone operator yet for array-like objects. As the code below illustrates, John Resig's jQuery cloner turns arrays with non-numeric properties into objects that are not arrays, and RegDwight's JSON cloner drops the non-numeric properties. The following tests illustrate these points on multiple browsers:

<pre><code>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)
</code></pre>

blocks|key|1747924|text|仅仅因为我没有看到AngularJS被提及，并且认为人们可能想知道...|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1747925|angular.copy还提供了一种深度复制对象和数组的方法。|style|CODE|1747926|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/AngularJS|1|https://docs.angularjs.org/api/ng/function/angular.copy^0|9|9|0|0|0|C|0|C|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Just because I didn't see <a href="http://en.wikipedia.org/wiki/AngularJS" rel="noreferrer">AngularJS</a> mentioned and thought that people might want to know...

<a href="https://docs.angularjs.org/api/ng/function/angular.copy" rel="noreferrer"><code>angular.copy</code></a> also provides a method of deep copying objects and arrays.

blocks|key|1532414|text|我有两个很好的答案，取决于你的目标是不是克隆一个“普通的老式JavaScript对象”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532415|我们还假设您的意图是创建一个完整的克隆，而没有回源对象的原型引用。如果您对完整的克隆不感兴趣，那么您可以使用其他答案中提供的许多Object.clone()例程(克罗克福德模式)。|1532416|对于普通的旧JavaScript对象，在现代运行时中克隆对象的一种行之有效的好方法非常简单：|1532417|var+clone+=+JSON.parse(JSON.stringify(obj));|code-block|syntax|javascript|1532418|请注意，源对象必须是纯JSON对象。这就是说，它的所有嵌套属性都必须是标量(如布尔值、字符串、数组、对象等)。任何函数或特殊对象(如RegExp或Date+)都不会被克隆。|1532419|它是否有效？见鬼，是的。我们已经尝试了各种克隆方法，这种方法效果最好。我敢肯定一些忍者能变出更快的方法。但我怀疑我们谈论的是边际收益。|1532420|这种方法非常简单，易于实现。将其封装到一个方便的函数中，如果您确实需要挤出一些收益，请稍后再进行。|1532421|现在，对于非纯JavaScript对象，没有一个真正简单的答案。事实上，由于JavaScript函数和内部对象状态的动态特性，因此不可能存在这种情况。深度克隆包含函数的JSON结构需要重新创建这些函数及其内部上下文。而JavaScript就是没有一个标准化的方法来做到这一点。|1532422|要做到这一点，正确的方法同样是通过一个方便的方法，您可以在代码中声明和重用该方法。便利性方法可以赋予您对自己的对象的一些理解，因此您可以确保在新对象中正确地重新创建图形。|1532423|我们是自己写的，但我见过的最好的通用方法在这里：|1532424|http://davidwalsh.name/javascript-clone|offset|length|1532425|这是正确的想法。作者(David+Walsh)已经注释掉了广义函数的克隆。这是您可能选择做的事情，具体取决于您的用例。|1532426|主要思想是，您需要在每个类型的基础上特殊处理函数(或所谓的原型类)的实例化。在这里，他为RegExp和Date提供了一些示例。|1532427|这段代码不仅简短，而且可读性也很好。它很容易扩展。|1532428|这是有效的吗？见鬼，是的。假设目标是生成一个真正的深度复制克隆，那么您将不得不遍历源对象图的成员。使用这种方法，您可以精确地调整要处理的子成员以及如何手动处理自定义类型。|1532429|这就对了。有两种方法。在我看来，两者都是高效的。|1532430|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|0|0|13|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1J|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1K|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1L|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1M|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1R|8|@]|9|@$Y|1S|Z|1T|1|1U]]|A|$]]|$1|10|3|11|5|6|7|1V|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1W|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1X|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|X]]]]

I have two good answers depending on whether your objective is to clone a "plain old JavaScript object" or not.

Let's also assume that your intention is to create a complete clone with no prototype references back to the source object. If you're not interested in a complete clone, then you can use many of the Object.clone() routines provided in some of the other answers (Crockford's pattern).

For plain old JavaScript objects, a tried and true good way to clone an object in modern runtimes is quite simply:

<pre><code>var clone = JSON.parse(JSON.stringify(obj));
</code></pre>

Note that the source object must be a pure JSON object. This is to say, all of its nested properties must be scalars (like boolean, string, array, object, etc). Any functions or special objects like RegExp or Date will not be cloned.

Is it efficient? Heck yes. We've tried all kinds of cloning methods and this works best. I'm sure some ninja could conjure up a faster method. But I suspect we're talking about marginal gains.

This approach is just simple and easy to implement. Wrap it into a convenience function and if you really need to squeeze out some gain, go for at a later time.

Now, for non-plain JavaScript objects, there isn't a really simple answer. In fact, there can't be because of the dynamic nature of JavaScript functions and inner object state. Deep cloning a JSON structure with functions inside requires you recreate those functions and their inner context. And JavaScript simply doesn't have a standardized way of doing that.

The correct way to do this, once again, is via a convenience method that you declare and reuse within your code. The convenience method can be endowed with some understanding of your own objects so you can make sure to properly recreate the graph within the new object.

We're written our own, but the best general approach I've seen is covered here:

<a href="http://davidwalsh.name/javascript-clone" rel="noreferrer">http://davidwalsh.name/javascript-clone</a>

This is the right idea. The author (David Walsh) has commented out the cloning of generalized functions. This is something you might choose to do, depending on your use case.

The main idea is that you need to special handle the instantiation of your functions (or prototypal classes, so to speak) on a per-type basis. Here, he's provided a few examples for RegExp and Date.

Not only is this code brief, but it's also very readable. It's pretty easy to extend.

Is this efficient? Heck yes. Given that the goal is to produce a true deep-copy clone, then you're going to have to walk the members of the source object graph. With this approach, you can tweak exactly which child members to treat and how to manually handle custom types.

So there you go. Two approaches. Both are efficient in my view.

blocks|key|1748340|text|我回答这个问题已经晚了，但我有另一种克隆对象的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1748341|function+cloneObject(obj)+{
++++if+(obj+===+null+%7C%7C+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|code-block|syntax|javascript|1748342|这样会更好更快：|1748343|var+a+=+{"a":1,"b":2};
var+b+=+JSON.parse(JSON.stringify(a));++|1748344|和|1748345|var+a+=+{"a":1,"b":2};

//+Deep+copy
var+newObject+=+jQuery.extend(true,+{},+a);|1748346|我已经对代码进行了基准标记，您可以测试结果here|offset|length|1748347|并分享结果：|1748348|📷|atomic|1748349|参考资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty|1748350|entityMap|0|LINK|mutability|MUTABLE|url|http://jsben.ch/vyEky|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/cbd9156c6376ade43a43d342f4e21c40.png|imageAlt|2|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty^0|0|0|0|0|0|0|L|4|0|0|0|0|1|1|0|5|2U|2|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1H|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1J|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1L|8|@]|9|@$Q|1M|R|1N|1|1O]]|A|$]]|$1|S|3|T|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1Q|8|@]|9|@$Q|1R|R|1S|1|1T]]|A|$]]|$1|X|3|Y|5|6|7|1U|8|@]|9|@$Q|1V|R|1W|1|1X]]|A|$]]|$1|Z|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]|17|$5|18|13|19|A|$1A|1B|1C|-4]]|1D|$5|12|13|14|A|$15|1E]]]]

I am late to answer this question, but I have an another way of cloning the object:
<pre><code>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({&quot;a&quot;:1,&quot;b&quot;:2}); // calling
</code></pre>
which is much better and faster then:
<pre><code>var a = {&quot;a&quot;:1,&quot;b&quot;:2};
var b = JSON.parse(JSON.stringify(a)); 
</code></pre>
and
<pre><code>var a = {&quot;a&quot;:1,&quot;b&quot;:2};

// Deep copy
var newObject = jQuery.extend(true, {}, a);
</code></pre>
I have bench-marked the code and you can test the results <a href="http://jsben.ch/vyEky" rel="noreferrer">here</a>:
and sharing the results:
<a href="https://i.stack.imgur.com/K8ztO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/K8ztO.png" alt="enter image description here" /></a>
References: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty</a>

blocks|key|1531888|text|这通常不是最有效的解决方案，但它可以满足我的需求。下面是简单的测试用例...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531889|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+%7C%7C+[];

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

++++if+(t+===+"object"+%7C%7C+t+===+"function")+{

++++++++//+check+to+see+if+we've+already+cloned+obj
++++++++for+(i+=+0,+l+=+clones.length;+i+<+l;+i%2B%2B)+{
++++++++++++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+%7C%7C+obj;
}|code-block|syntax|javascript|1531890|循环数组测试...|1531891|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|1531892|功能测试...|1531893|f+=+new+Function
f.a+=+a
ff+=+clone(f)
ff+===+f+//=>+true
ff.a+===+a+//=>+false|1531894|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

This isn't generally the most efficient solution, but it does what I need. Simple test cases below...

<pre><code>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 &lt; 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;
}
</code></pre>

Cyclic array test...

<pre><code>a = []
a.push("b", "c", a)
aa = clone(a)
aa === a //=&gt; false
aa[2] === a //=&gt; false
aa[2] === a[2] //=&gt; false
aa[2] === aa //=&gt; true
</code></pre>

Function test...

<pre><code>f = new Function
f.a = a
ff = clone(f)
ff === f //=&gt; true
ff.a === a //=&gt; false
</code></pre>

blocks|key|1532845|text|对于希望使用JSON.parse(JSON.stringify(obj))版本但又不丢失Date对象的用户，可以使用second+argument+of+parse+method将字符串转换回Date：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1532846|​|1532847|function+clone(obj)+{
++var+regExp+=+/%5E\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
++return+JSON.parse(JSON.stringify(obj),+function(k,+v)+{
++++if+(typeof+v+===+'string'+&&+regExp.test(v))
++++++return+new+Date(v)
++++return+v;
++})
}

//+usage:
var+original+=+{
+a:+[1,+null,+undefined,+0,+{a:null},+new+Date()],
+b:+{
+++c(){+return+0+}
+}
}

var+cloned+=+clone(original)

console.log(cloned)|code-block|syntax|javascript|1532848|1532849|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter^0|6|V|25|5|1M|V|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

For the people who want to use the <code>JSON.parse(JSON.stringify(obj))</code> version, but without losing the Date objects, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter" rel="nofollow noreferrer">second argument of <code>parse</code> method</a> to convert the strings back to Date:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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(obj), function(k, v) {
 if (typeof v === 'string' &amp;&amp; regExp.test(v))
 return new Date(v)
 return v;
 })
}

// usage:
var original = {
 a: [1, null, undefined, 0, {a:null}, new Date()],
 b: {
 c(){ return 0 }
 }
}

var cloned = clone(original)

console.log(cloned)</code></pre>
</div>
</div>

blocks|key|1531676|text|//+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;
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1531677|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|1532202|text|下面是一个全面的JavaScript+()方法，它可以克隆任何克隆对象。它可以处理几乎所有的情况：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532203|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;
};|code-block|syntax|javascript|1532204|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is a comprehensive clone() method that can clone any JavaScript object. It handles almost all the cases:

<pre><code>function clone(src, deep) {

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

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

 // DOM elements
 if (src.nodeType &amp;&amp; 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;
};
</code></pre>

blocks|key|1533082|text|AngularJS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533083|如果你使用的是angular，你也可以这样做|1533084|var+newObject+=+angular.copy(oldObject);|code-block|syntax|javascript|1533085|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<h2>AngularJS</h2>

Well if you're using angular you could do this too

<pre><code>var newObject = angular.copy(oldObject);
</code></pre>

blocks|key|1747988|text|我使用npm克隆库。显然，它也可以在浏览器中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747989|https://www.npmjs.com/package/clone|offset|length|1747990|let+a+=+clone(b)|code-block|syntax|javascript|1747991|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

I use the npm clone library. Apparently it also works in the browser.

<a href="https://www.npmjs.com/package/clone" rel="noreferrer">https://www.npmjs.com/package/clone</a>

<pre><code>let a = clone(b)
</code></pre>

blocks|key|1748540|text|根据我的经验，递归版本的性能远远优于JSON.parse(JSON.stringify(obj))。这是一个现代化的递归深度对象复制函数，它可以放在一行中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1748541|function+deepCopy(obj)+{
++return+Object.keys(obj).reduce((v,+d)+=>+Object.assign(v,+{
++++[d]:+(obj[d].constructor+===+Object)+?+deepCopy(obj[d])+:+obj[d]
++}),+{});
}|code-block|syntax|javascript|1748542|与JSON.parse...方法相比，这是围绕40+times+faster执行的。|1748543|entityMap|0|LINK|mutability|MUTABLE|url|https://www.measurethat.net/Benchmarks/ShowResult/25487^0|I|V|0|0|1|D|N|F|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

In my experience, a recursive version vastly outperforms <code>JSON.parse(JSON.stringify(obj))</code>. Here is a modernized recursive deep object copy function which can fit on a single line:

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

This is performing around <a href="https://www.measurethat.net/Benchmarks/ShowResult/25487" rel="noreferrer">40 times faster</a> than the <code>JSON.parse...</code> method.

blocks|key|1747965|text|单行ECMAScript+6解决方案(未处理日期/正则表达式等特殊对象类型)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747966|​|1747967|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);|code-block|syntax|javascript|1747968|1747969|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Single-line ECMAScript 6 solution (special object types like Date/Regex not handled):

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const clone = (o) =&gt;
 typeof o === 'object' &amp;&amp; o !== null ? // only clone objects
 (Array.isArray(o) ? // if cloning an array
 o.map(e =&gt; clone(e)) : // clone each of its elements
 Object.keys(o).reduce( // otherwise reduce every key in the object
 (r, k) =&gt; (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);</code></pre>
</div>
</div>

blocks|key|1533209|text|Lodash有一个函数可以像这样为你处理这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533210|var+foo+=+{a:+'a',+b:+{c:'d',+e:+{f:+'g'}}};

var+bar+=+_.cloneDeep(foo);
//+bar+=+{a:+'a',+b:+{c:'d',+e:+{f:+'g'}}}+|code-block|syntax|javascript|1533211|阅读文档here。|offset|length|1533212|entityMap|0|LINK|mutability|MUTABLE|url|https://lodash.com/docs/#cloneDeep^0|0|0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Lodash has a function that handles that for you like so.

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

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

Read the docs <a href="https://lodash.com/docs/#cloneDeep" rel="noreferrer">here</a>.

blocks|key|1533478|text|ES+2017示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533479|let+objectToCopy+=+someObj;
let+copyOfObject+=+{};
Object.defineProperties(copyOfObject,+Object.getOwnPropertyDescriptors(objectToCopy));
//+copyOfObject+will+now+be+the+same+as+objectToCopy|code-block|syntax|javascript|1533480|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

ES 2017 example:

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

blocks|key|1746962|text|这是我创建的不使用原型的最快方法，因此它将在新对象中维护hasOwnProperty。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1746963|解决方案是迭代原始对象的顶级属性，创建两个副本，删除原始对象中的每个属性，然后重置原始对象并返回新副本。它只需要像顶级属性一样多次迭代。这将保存所有的if条件，以检查每个属性是否是函数、对象、字符串等，而不必迭代每个后代属性。|offset|length|style|CODE|1746964|唯一的缺点是必须为原始对象提供其原始创建的名称空间，以便对其进行重置。|1746965|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};|code-block|syntax|javascript|1746966|entityMap^0|0|23|2|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

This is the fastest method I have created that doesn't use the prototype, so it will maintain hasOwnProperty in the new object.

The solution is to iterate the top level properties of the original object, make two copies, delete each property from the original and then reset the original object and return the new copy. It only has to iterate as many times as top level properties. This saves all the <code>if</code> conditions to check if each property is a function, object, string, etc., and doesn't have to iterate each descendant property.

The only drawback is that the original object must be supplied with its original created namespace, in order to reset it.

<pre><code>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};
</code></pre>

blocks|key|1747510|text|答案有很多，但没有一个能给出我想要的效果。我想利用jQuery的深度复制的能力...但是，当它遇到一个数组时，它只是简单地复制对数组的引用，并深入复制其中的项。为了解决这个问题，我做了一个很好的小递归函数，它将自动创建一个新的数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747511|(如果你愿意，它甚至可以检查kendo.data.ObservableArray！但是，如果希望数组再次可见，请确保调用kendo.observable(newItem)。)|1747512|因此，要完全复制现有项，只需执行以下操作：|1747513|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)+%7C%7C+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;
++++++++}
++++}
}|code-block|syntax|javascript|1747514|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

There are a lot of answers, but none of them gave the desired effect I needed. I wanted to utilize the power of jQuery's deep copy... However, when it runs into an array, it simply copies the reference to the array and deep copies the items in it. To get around this, I made a nice little recursive function that will create a new array automatically. 

(It even checks for kendo.data.ObservableArray if you want it to! Though, make sure you make sure you call kendo.observable(newItem) if you want the Arrays to be observable again.) 

So, to fully copy an existing item, you just do this:

<pre><code>var newItem = jQuery.extend(true, {}, oldItem);
createNewArrays(newItem);


function createNewArrays(obj) {
 for (var prop in obj) {
 if ((kendo != null &amp;&amp; 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;
 }
 }
}
</code></pre>

blocks|key|1747593|text|我通常使用var+newObj+=+JSON.parse(+JSON.stringify(oldObje)+);，但这里有一种更合适的方式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1747594|var+o+=+{};

var+oo+=+Object.create(o);

(o+===+oo);+//+=>+false|code-block|syntax|javascript|1747595|观看传统浏览器！|1747596|entityMap^0|5|1F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I usually use <code>var newObj = JSON.parse( JSON.stringify(oldObje) );</code> but, here's a more proper way:

<pre><code>var o = {};

var oo = Object.create(o);

(o === oo); // =&gt; false
</code></pre>

Watch legacy browsers!

blocks|key|1747660|text|为了便于将来参考，当前的ECMAScript+6草案引入了Object.assign作为一种克隆对象的方法。示例代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1747661|var+obj1+=+{+a:+true,+b:+1+};
var+obj2+=+Object.assign(obj1);
console.log(obj2);+//+{+a:+true,+b:+1+}|code-block|syntax|javascript|1747662|在编写support+is+limited+to+Firefox+34+in+browsers时，它还不能在生产代码中使用(当然，除非您正在编写Firefox扩展)。|1747663|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015|1|http://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign|2|http://kangax.github.io/compat-table/es6/#Object.assign^0|C|C|0|T|D|1|0|0|3|18|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]|U|$5|N|O|P|C|$Q|V]]]]

For future reference, the current draft of <a href="https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015" rel="nofollow">ECMAScript 6</a> introduces <a href="http://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign" rel="nofollow">Object.assign</a> as a way of cloning objects. Example code would be:

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

At the time of writing <a href="http://kangax.github.io/compat-table/es6/#Object.assign" rel="nofollow">support is limited to Firefox 34 in browsers</a> so it’s not usable in production code just yet (unless you’re writing a Firefox extension of course).

blocks|key|1533269|text|有很多方法可以实现这一点，但是如果你想在没有任何库的情况下做到这一点，你可以使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533270|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;
}|code-block|syntax|javascript|1533271|让我知道你的想法。|1533272|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

There are so many ways to achieve this, but if you want to do this without any library, you can use the following:

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

 }
 return newObject;
}
</code></pre>

Let me know what you think.

blocks|key|1747870|text|因为递归对于JavaScript来说太昂贵了，而且我找到的大多数答案都是使用递归的，而JSON方法会跳过不可转换的部分(函数等)。所以我做了一点研究，找到了这个跳床技巧来避免它。代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747871|/*
+*+Trampoline+to+avoid+recursion+in+JavaScript,+see:
+*+++++https://www.integralist.co.uk/posts/functional-recursive-javascript-programming/
+*/
function+trampoline()+{
++++var+func+=+arguments[0];
++++var+args+=+[];
++++for+(var+i+=+1;+i+<+arguments.length;+i%2B%2B)+{
++++++++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+%7C%7C+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;
};|code-block|syntax|javascript|1747872|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

As recursion is just too expensive for JavaScript, and most answers I have found are using recursion, while JSON approach will skip the non-JSON-convertible parts (Function, etc.). So I did a little research and found this trampoline technique to avoid it. Here's the code:
<pre><code>/*
 * Trampoline to avoid recursion in JavaScript, see:
 * https://www.integralist.co.uk/posts/functional-recursive-javascript-programming/
 */
function trampoline() {
 var func = arguments[0];
 var args = [];
 for (var i = 1; i &lt; arguments.length; i++) {
 args[i - 1] = arguments[i];
 }

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

 while (currentBatch &amp;&amp; currentBatch.length &gt; 0) {
 currentBatch.forEach(function(eachFunc) {
 var ret = eachFunc();
 if (ret &amp;&amp; ret.length &gt; 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' &amp;&amp; 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;
};
</code></pre>

blocks|key|1533407|text|下面是我使用ES2015默认值和扩展运算符深度克隆对象的方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1533408|+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
}|code-block|syntax|javascript|1533409|​|1533410|const+testObj+=+{
++"type":+"object",
++"properties":+{
++++"userId":+{
++++++"type":+"string",
++++++"chance":+"guid"
++++},
++++"emailAddr":+{
++++++"type":+"string",
++++++"chance":+{
++++++++"email":+{
++++++++++"domain":+"fake.com"
++++++++}
++++++},
++++++"pattern":+".%2B@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))|1533411|1533412|entityMap^0|6|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|U|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|V|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|O|3|L|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

Here is my way of deep cloning a object with <code>ES2015</code> default value and spread operator

<pre><code> const makeDeepCopy = (obj, copy = {}) =&gt; {
 for (let item in obj) {
 if (typeof obj[item] === 'object') {
 makeDeepCopy(obj[item], copy)
 }
 if (obj.hasOwnProperty(item)) {
 copy = {
 ...obj
 }
 }
 }
 return copy
}
</code></pre>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 = {}) =&gt; {
 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))</code></pre>
</div>
</div>

blocks|key|1533591|text|希望这能有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533592|function+deepClone(obj)+{
++++/*
+++++*+Duplicates+an+object+
+++++*/

++++var+ret+=+null;
++++if+(obj+!==+Object(obj))+{+//+primitive+types
++++++++return+obj;
++++}
++++if+(obj+instanceof+String+%7C%7C+obj+instanceof+Number+%7C%7C+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;
}|code-block|syntax|javascript|1533593|https://github.com/jinujd/Javascript-Deep-Clone|offset|length|1533594|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1B|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

Hope this helps.

<pre><code>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;
}
</code></pre>

<a href="https://github.com/jinujd/Javascript-Deep-Clone" rel="nofollow noreferrer">https://github.com/jinujd/Javascript-Deep-Clone</a>

blocks|key|1749982|text|我的场景有点不同。我有一个对象，既有嵌套的对象，也有函数。因此，Object.assign()和JSON.stringify()不是我的问题的解决方案。使用第三方库对我来说也不是一个选择。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1749983|因此，我决定创建一个简单的函数，使用内置方法复制一个对象及其文字属性、嵌套对象和函数。|1749984|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]);
++++++++++++}
++++++++}
++++});
};|code-block|syntax|javascript|1749985|下面是一段测试代码：|1749986|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);|1749987|对于与效率相关的问题，我相信这是我遇到的问题的最简单和最有效的解决方案。我非常感谢对这个算法的任何评论，这可以使它更有效。|1749988|entityMap^0|W|F|1C|G|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

My scenario was a bit different. I had an object with nested objects as well as functions. Therefore, <code>Object.assign()</code> and <code>JSON.stringify()</code> were not solutions to my problem. Using third-party libraries was not an option for me neither.

Hence, I decided to make a simple function to use built-in methods to copy an object with its literal properties, its nested objects, and functions.

<pre><code>let deepCopy = (target, source) =&gt; {
 Object.assign(target, source);
 // check if there's any nested objects
 Object.keys(source).forEach((prop) =&gt; {
 /**
 * 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) =&gt; {
 // 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]);
 }
 }
 });
};
</code></pre>

Here's a test code:

<pre><code>let a = {
 name: 'Human', 
 func: () =&gt; {
 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 = () =&gt; { 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);
</code></pre>

For efficiency-related concerns, I believe this is the simplest and most efficient solution to the problem I had. I would appreciate any comments on this algorithm that could make it more efficient.

blocks|key|1531832|text|如果你想推广你的对象克隆算法，我认为这是最好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1531833|它可以与jQuery一起使用，也可以不与jQuery一起使用，尽管如果您希望克隆对象具有与原始对象相同的“类”，我建议您不要使用jQuery的extend方法。|1531834|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'+%7C%7C+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('"'%2BJSON.stringify(obj)%2B'"');
++++++++++++}
++++++++else
++++++++++++try{
++++++++++++++++return+eval(uneval(obj));
++++++++++++}catch(err){
++++++++++++++++return+eval('"'%2Buneval(obj)%2B'"');
++++++++++++}
++++//+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+%7C%7C+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);++++++++++++
}|code-block|syntax|javascript|1531835|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I think that this is the best solution if you want to generalize your object cloning algorithm. 
It can be used with or without jQuery, although I recommend leaving jQuery's extend method out if you want you the cloned object to have the same "class" as the original one.

<pre><code>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); 
}
</code></pre>

blocks|key|1532719|text|使用Object.create()获取prototype和对instanceof的支持，并使用for()循环获取可枚举键：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1532720|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;
}|code-block|syntax|javascript|1532721|entityMap^0|2|F|J|9|U|A|1B|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|L|$]]

Use <code>Object.create()</code> to get the <code>prototype</code> and support for <code>instanceof</code>, and use a <code>for()</code> loop to get enumerable keys:

<pre><code>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 &amp;&amp; typeof value==="object") {
 clone[key] = cloneObject(value);
 } else {
 clone[key] = value;
 }
 }
 }

 return clone;
}
</code></pre>

blocks|key|1748100|text|为了便于将来参考，可以使用下面的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1748101|ES6：|1748102|_clone:+function(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);
}|code-block|syntax|javascript|1748103|ES5：|1748104|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);|1748105|}|1748106|E.g|1748107|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}}|1748108|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

For future reference, one can use this code

ES6:

<pre><code>_clone: function(obj){
 let newObj = {};
 for(let i in obj){
 if(typeof(obj[i]) === 'object' &amp;&amp; Object.keys(obj[i]).length){
 newObj[i] = clone(obj[i]);
 } else{
 newObj[i] = obj[i];
 }
 }
 return Object.assign({},newObj);
}
</code></pre>

ES5:

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

}

E.g 

<pre><code>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}}
</code></pre>

blocks|key|1533148|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533149|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%2B%2B)+{
++++++++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;
++}
}|code-block|syntax|javascript|1533150|1533151|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class Handler {
 static deepCopy (obj) {
 if (Object.prototype.toString.call(obj) === '[object Array]') {
 const result = [];
 
 for (let i = 0, len = obj.length; i &lt; 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;
 }
}</code></pre>
</div>
</div>

blocks|key|1748158|text|在不涉及原型继承的情况下，您可以深入分离对象和数组，如下所示；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1748159|​|1748160|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);|code-block|syntax|javascript|1748161|1748162|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Without touching the prototypical inheritance you may deep lone objects and arrays as follows;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function objectClone(o){
 var ot = Array.isArray(o);
 return o !== null &amp;&amp; typeof o === "object" ? Object.keys(o)
 .reduce((r,k) =&gt; o[k] !== null &amp;&amp; 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);</code></pre>
</div>
</div>

blocks|key|1748405|text|由Promise完成的异步对象克隆又如何呢|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1748406|async+function+clone(thingy+/**/)
{
++++if(thingy+instanceof+Promise)
++++{
++++++++throw+Error("This+function+cannot+clone+Promises.");
++++}
++++return+thingy;
}|code-block|syntax|javascript|1748407|entityMap^0|1|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

What about asynchronous object cloning done by a <code>Promise</code>?

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

blocks|key|1750040|text|仅当对象的属性没有引用类型键时，Object.assign({},sourceObj)才会克隆对象。例如|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1750041|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|code-block|syntax|javascript|1750042|所以对于深度克隆是不可能以这种方式实现的。|1750043|有效的最佳解决方案是|1750044|var+obj+=+Json.stringify(yourSourceObj)
var+cloned+=+Json.parse(obj);|1750045|entityMap^0|G|R|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<code>Object.assign({},sourceObj)</code> only clones the object if their property is not having reference type key.
ex 

<pre><code>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 =&gt; yes,no,maybe,skip
</code></pre>

So for the deep cloning is not possible to achieve in this way.

The best solution that works is

<pre><code>var obj = Json.stringify(yourSourceObj)
var cloned = Json.parse(obj);
</code></pre>

blocks|key|1535135|text|这是我的解决方案，不使用任何库或原生javascript函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1535136|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;
++}
}|code-block|syntax|javascript|1535137|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is my solution without using any library or native javascript function.

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

blocks|key|1533092|text|这是一个带有递归的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533093|​|1533094|obj+=+{
++a:+{+b:+{+c:+{+d:+['1',+'2']+}+}+},
++e:+'Saeid'
}
const+Clone+=+function+(obj)+{
++
++const+container+=+Array.isArray(obj)+?+[]+:+{}
++const+keys++=+Object.keys(obj)
+++
++for+(let+i+=+0;+i+<+keys.length;+i%2B%2B)+{
++++const+key+=+keys[i]
++++if(typeof+obj[key]+==+'object')+{
++++++container[key]+=+Clone(obj[key])
++++}
++++else
++++++container[key]+=+obj[key].slice()
++}
++
++return+container
}
+console.log(Clone(obj))|code-block|syntax|javascript|1533095|1533096|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

This is a solution with recursion:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>obj = {
 a: { b: { c: { d: ['1', '2'] } } },
 e: 'Saeid'
}
const Clone = function (obj) {
 
 const container = Array.isArray(obj) ? [] : {}
 const keys = Object.keys(obj)
 
 for (let i = 0; i &lt; keys.length; i++) {
 const key = keys[i]
 if(typeof obj[key] == 'object') {
 container[key] = Clone(obj[key])
 }
 else
 container[key] = obj[key].slice()
 }
 
 return container
}
 console.log(Clone(obj))</code></pre>
</div>
</div>

blocks|key|1749738|text|当您的对象是嵌套的，并且包含数据对象、其他结构化对象或某些属性对象等时，则使用JSON.parse(JSON.stringify(object))、Object.assign({},+obj)或$.extend(true,+{},+obj)将不起作用。在这种情况下，使用lodash。这很简单，很容易。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1749739|var+obj+=+{a:+25,+b:+{a:+1,+b:+2},+c:+new+Date(),+d:+anotherNestedObject+};
var+A+=+_.cloneDeep(obj);|code-block|syntax|javascript|1749740|现在A将是您新克隆的obj，没有任何引用..|1749741|entityMap^0|13|Y|22|M|2P|N|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

When your object is nested and it contains data object, other structured object or some property object, etc then using <code>JSON.parse(JSON.stringify(object))</code> or <code>Object.assign({}, obj)</code> or <code>$.extend(true, {}, obj)</code> will not work. In that case use lodash. It is simple and easy..

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

Now A will be your new cloned of obj without any references..

blocks|key|1534887|text|如果你发现自己经常做这类事情(例如创建撤销重做功能)，可能值得研究一下Immutable.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1534888|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"|code-block|syntax|javascript|1534889|https://codepen.io/anon/pen/OBpqNE?editors=1111|1534890|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/immutable-js/|1^0|Z|C|0|0|0|0|1B|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|K|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|J]]]]

if you find yourself doing this type of thing regular ( eg- creating undo redo functionality ) it might be worth looking into <a href="https://facebook.github.io/immutable-js/" rel="nofollow noreferrer">Immutable.js</a>

<pre><code>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"
</code></pre>

<a href="https://codepen.io/anon/pen/OBpqNE?editors=1111" rel="nofollow noreferrer">https://codepen.io/anon/pen/OBpqNE?editors=1111</a>

blocks|key|1749904|text|在一些较新版本的浏览器(reference)上支持的新方法Object.fromEntries()的提出。我想介绍下一种递归方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1749905|​|1749906|const+obj+=+{
++key1:+{key11:+"key11",+key12:+"key12",+key13:+{key131:+22}},
++key2:+{key21:+"key21",+key22:+"key22"},
++key3:+"key3",
++key4:+[1,2,3,+{key:+"value"}]
}

const+cloneObj+=+(obj)+=>
{
++++if+(Object(obj)+!==+obj)
+++++++return+obj;
++++else+if+(Array.isArray(obj))
+++++++return+obj.map(cloneObj);

++++return+Object.fromEntries(Object.entries(obj).map(
++++++++([k,v])+=>+([k,+cloneObj(v)])
++++));
}

//+Clone+the+original+object.
let+newObj+=+cloneObj(obj);

//+Make+changes+on+the+original+object.
obj.key1.key11+=+"TEST";
obj.key3+=+"TEST";
obj.key1.key13.key131+=+"TEST";
obj.key4[1]+=+"TEST";
obj.key4[3].key+=+"TEST";

//+Display+both+objects+on+the+console.
console.log("Original+object:+",+obj);
console.log("Cloned+object:+",+newObj);|code-block|syntax|javascript|1749907|.as-console+{background-color:black+!important;+color:lime;}
.as-console-wrapper+{max-height:100%25+!important;+top:0;}|1749908|1749909|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries#Browser_compatibility|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries^0|C|9|0|T|K|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]|$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]]]

With the proposal of the new method <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries" rel="nofollow noreferrer">Object.fromEntries()</a> that is supported on newer versions of some browsers (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries#Browser_compatibility" rel="nofollow noreferrer">reference</a>). I want to contribute with the next recursive approach:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const obj = {
 key1: {key11: "key11", key12: "key12", key13: {key131: 22}},
 key2: {key21: "key21", key22: "key22"},
 key3: "key3",
 key4: [1,2,3, {key: "value"}]
}

const cloneObj = (obj) =&gt;
{
 if (Object(obj) !== obj)
 return obj;
 else if (Array.isArray(obj))
 return obj.map(cloneObj);

 return Object.fromEntries(Object.entries(obj).map(
 ([k,v]) =&gt; ([k, cloneObj(v)])
 ));
}

// Clone the original object.
let newObj = cloneObj(obj);

// Make changes on the original object.
obj.key1.key11 = "TEST";
obj.key3 = "TEST";
obj.key1.key13.key131 = "TEST";
obj.key4[1] = "TEST";
obj.key4[3].key = "TEST";

// Display both objects on the console.
console.log("Original object: ", obj);
console.log("Cloned object: ", newObj);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}</code></pre>
</div>
</div>

blocks|key|1749849|text|function+clone(obj)+{
++++var+copy;

++++//+Handle+the+3+simple+types,+and+null+or+undefined
++++if+(null+==+obj+%7C%7C+"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%2B%2B)+{
++++++++++++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.");
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1749850|使用下面的方法代替JSON.parse(JSON.stringify(obj))，因为它比下面的方法慢|unstyled|offset|length|style|CODE|1749851|How+do+I+correctly+clone+a+JavaScript+object?|1749852|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object^0|0|9|V|0|0|19|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@$G|W|H|X|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@$G|Z|H|10|1|11]]|A|$]]|$1|M|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>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 &lt; 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.");
}
</code></pre>

use the following method instead of <code>JSON.parse(JSON.stringify(obj))</code> because 
it is slower than the following method 

<a href="https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object">How do I correctly clone a JavaScript object?</a>

What is the most efficient way to clone a JavaScript object? I've seen <code>obj = eval(uneval(o));</code> being used, but <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/uneval" rel="noreferrer">that's non-standard and only supported by Firefox</a>. I've done things like <code>obj = JSON.parse(JSON.stringify(o));</code> but question the efficiency. I've also seen recursive copying functions with various flaws.
 
I'm surprised no canonical solution exists.

What is the most efficient way to deep clone an object in JavaScript?

jQuery

JSON

克隆JavaScript对象的最有效方法是什么？我见过有人用obj = eval(uneval(o));，但是。我做过像obj = JSON.parse(JSON.stringify(o));这样的事情，但是我质疑它的效率。我也看到过有各种缺陷的递归复制函数。我很惊讶没有规范的解决方案存在。

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

回答 48

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 48

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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