之前的文章《你值得了解的JavaScript“繼承之jquery”使用方法（代碼詳解）》中，給大家了解了JavaScript“繼承之jquery”使用方法。下面本篇文章給大家了解一下JS中對(duì)象拷貝方法，有需要的朋友可以參考一下。

說(shuō)到javascript中的對(duì)象拷貝，首先我們想到的是Object.assign()

JSON.parse(JSON.stringify()),還有ES6的展開操作符[...]

因?yàn)樵?code>js中=運(yùn)算符 對(duì)于對(duì)象來(lái)說(shuō)，不能創(chuàng)建副本，只是對(duì)該對(duì)象的引用

運(yùn)算符

var x = {   a: 1,   b: 2, }; y = x; x.a = 10; console.log(x); //{a:10, b:2} console.log(y); //{a:10, b:2}

所以在進(jìn)行對(duì)象操作時(shí)，運(yùn)算符等于號(hào)（=）不可取

Object.assign()

var x = {   a: 1,   b: 2, }; y = Object.assign({}, x); x.a = 10; console.log(x); //{a:10, b:2} console.log(y); //{a:1, b:2}

初看，不會(huì)發(fā)現(xiàn)異常，因?yàn)樗木褪俏覀兯慕Y(jié)果，把對(duì)象結(jié)構(gòu)弄再稍微復(fù)雜些再看

var x = {   a: 1,   b: 2,   c: {     d: 3,   }, }; y = Object.assign({}, x);  x.a = 5; console.log(x); //{a:5, b:2, c:{d:3}} console.log(y); //{a:5, b:2, c:{d:3}}  x.c.d = 10; console.log(x); //{a:5, b:2, c:{d:10}} console.log(y); //{a:5, b:2, c:{d:10}}

此時(shí)就發(fā)現(xiàn)坑了，那么已經(jīng)證明了Object.assign()只是實(shí)現(xiàn)了對(duì)象的淺拷貝

Object.assign()還需要注意的一點(diǎn)是，原型鏈上屬性的不可枚舉對(duì)象是無(wú)法復(fù)制的，看一下代碼：

var x = {   a: 1, }; var y = Object.create(x, {   b: {     value: 2,   },   c: {     value: 3,     enumerable: true,   }, }); var z = Object.assign({}, y); console.log(z); //{c:3}

拿到z的值很讓人意外，因?yàn)?code>x是y的原型鏈，所以x不會(huì)被復(fù)制

屬性b是不可枚舉屬性，也不會(huì)被復(fù)制

只有c具有可枚舉描述，他可以被枚舉，所以才能被復(fù)制

以上的坑也可以很好的被解決，且往下看：

深拷貝JSON.parse(JSON.stringify())

解決淺拷貝的坑

var x = {   a: 1,   b: 2,   c: {     d: 3,   }, }; y = JSON.parse(JSON.stringify(x)); x.a = 5; x.c.d = 10; console.log(x); //{a:5, b:2, c:{d:10}} console.log(y); //{a:1, b:2, c:{d:3}}

當(dāng)然普通的對(duì)象，此種復(fù)制方式已經(jīng)是基本是完美了，那么他的坑在哪里呢

var x = {   a: 1,   b: function b() {     return "2";   }, }; y = JSON.parse(JSON.stringify(x)); z = Object.assign({}, x);  console.log(y); //{a:1} console.log(z); //{a:1, b:function b(){return '2'}}

從結(jié)果看來(lái)，Object.assign()可以復(fù)制方法，JSON.parse(JSON.stringify())不可以

再來(lái)看第第二個(gè)坑：

var x = {   a: 1,   b: {     c: 2,     d: 3,   }, };  x.c = x.b; x.d = x.a; x.b.c = x.c; x.b.d = x.d;  var y = JSON.parse(JSON.stringify(x)); console.log(x);  /* Uncaught TypeError: Converting circular structure to JSON      at JSON.stringify (<anonymous>)     at <anonymous>:8:25  */

報(bào)錯(cuò)了，其結(jié)果表明JSON.parse(JSON.stringify()),不能拷貝循環(huán)引用對(duì)象

再來(lái)看看Object.assign()

var x = {   a: 1,   b: {     c: 2,     d: 3,   }, };  x.c = x.b; x.d = x.a; x.b.c = x.c; x.b.d = x.d;  var y = Object.assign({}, x); console.log(x); /* [object Object]{ a:1,  b:[object, Object],  d:[object, Object],  d:1 } */

使用展開操作符[… ]

對(duì)象字面量的展開操作符目前是ECMAScript的第 3 階段提案，拷貝對(duì)象更加簡(jiǎn)單了

var x = [   "a",   "b",   "c",   "d",   {     e: 1,   }, ]; var y = [...x]; console.log(y); //['a', 'b', 'c', 'd', {'e':1}]  var m = {   a: 1,   b: 2,   c: ["d", "e"], }; var n = {   ...m, }; console.log(n); //{a:1, b:2, c:['d', 'e']}

需要注意的是展開操作符也是淺拷貝。那么復(fù)制對(duì)象這廝真的這么難搞嗎？

自己造輪子：

function copy(x) {   var y = {};   for (m in x) {     y[m] = x[m];   }   return y; } var o = {   a: 1,   b: 2,   c: {     d: 3,     e: 4,   }, }; var p = copy(o);

有人說(shuō)這么干應(yīng)該沒(méi)多大問(wèn)題了吧。那么只能呵呵了，繼續(xù)走

var x = {};  Object.defineProperty(x, "m", {   value: 5,   writable: false, });  console.log(x.m); //5 x.m = 25; //這一步?jīng)]報(bào)錯(cuò)，但是也沒(méi)執(zhí)行 console.log(x.m); //5

那么這樣一來(lái)，展開操作符復(fù)制對(duì)象到這里也會(huì)遇到坑。

到處都是坑，防不勝防….我寫到這估計(jì)還有許多坑都沒(méi)完全列出來(lái)

之后再寫吧

[完]

推薦學(xué)習(xí)：JavaScript視頻教程