這篇文章主要講解了“JavaScript中方對(duì)象拷貝方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript中方對(duì)象拷貝方法”吧！
順昌ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！
說(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ì)象的引用
重慶分公司
重慶分公司
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)（=）不可取
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 ()
at :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感謝各位的閱讀，以上就是“JavaScript中方對(duì)象拷貝方法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript中方對(duì)象拷貝方法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
