如何在JavaScript中復(fù)制變量

這篇文章給大家介紹如何在JavaScript中復(fù)制變量，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

1. 原生方法解決
最簡(jiǎn)單的辦法就是一個(gè)一個(gè)循環(huán)復(fù)制給新的變量。舉栗：

復(fù)制代碼
復(fù)制代碼
function copy(mainObj) {
let objCopy = {}; // objCopy will store a copy of the mainObj
let key;

for (key in mainObj) {
objCopy[key] = mainObj[key]; // copies each property to the objCopy object
}
return objCopy;
}

const mainObj = {
a: 2,
b: 5,
c: {
x: 7,
y: 4,
},
}

console.log(copy(mainObj));
復(fù)制代碼
復(fù)制代碼
缺點(diǎn)：

1. objCopy 的Object.prototype 方法與mainObj 會(huì)不一樣，通常情況下我們需要完全一樣的副本時(shí)，這個(gè)辦法并不適用。

2. 麻煩而且費(fèi)時(shí)費(fèi)事，代碼無法重用。

3. 如果原來的變量中包含Object類型，復(fù)制時(shí)還是會(huì)把這個(gè)子變量的索引交給新的變量，并不是創(chuàng)建了新的副本。

2. 深度復(fù)制
利用JSON轉(zhuǎn)換來復(fù)制變量。先將原先的變量轉(zhuǎn)換為String然后再重新組裝成JSON，這樣會(huì)產(chǎn)生一個(gè)不一樣的副本。

復(fù)制代碼
復(fù)制代碼
let obj = {
a: 1,
b: {
c: 2,
},
}

let newObj = JSON.parse(JSON.stringify(obj));

obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } (New Object Intact!)
復(fù)制代碼
復(fù)制代碼
缺點(diǎn)：

1. 變量很多的時(shí)候非常耗時(shí)耗內(nèi)存。

3. 使用Object.assign()
使用舉例：

復(fù)制代碼
復(fù)制代碼
// circular object
let obj = {
a: 'a',
b: {
c: 'c',
d: 'd',
},
}

obj.c = obj.b;
obj.e = obj.a;
obj.b.c = obj.c;
obj.b.d = obj.b;
obj.b.e = obj.b.c;

let newObj2 = Object.assign({}, obj);

console.log(newObj2);
復(fù)制代碼
復(fù)制代碼
可以把它封裝成一個(gè)方法：

復(fù)制代碼
// 封裝成方法
// 返回一個(gè)新的變量副本
// get a copy of an object
function getNewObjectOf(src) {
return Object.assign({}, src);
}
復(fù)制代碼
缺點(diǎn)：

1. 這個(gè)也是淺復(fù)制（僅復(fù)制頂層的屬性，底層屬性并不復(fù)制）。深層屬性會(huì)同樣返回索引，與原變量分享一個(gè)地址。（看下面栗子）

復(fù)制代碼
復(fù)制代碼
let obj = {
a: 1,
b: {
c: 2,
},
}
let newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2} }

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

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

newObj.b.c = 30;
console.log(obj); // { a: 10, b: { c: 30} }
console.log(newObj); // { a: 20, b: { c: 30} }

// 注意: 所有變量 的 *。b.c 都等于30; 原因看上面解釋。
復(fù)制代碼
復(fù)制代碼

結(jié)論：
原文中還有很多其他的辦法，但此文僅摘抄出最有用的幾個(gè)。一般不會(huì)用到第一種辦法，如需要復(fù)制的變量有很多層的話，需要用第二種辦法來復(fù)制，如果變量?jī)H僅包含一層（如json格式的配置信息變量），第三種是最高效的。

再次給出封裝好的方法：

// 封裝成方法// 返回一個(gè)新的變量副本
// get a copy of an object
function getNewObjectOf(src) {
 return Object.assign({}, src);
}

JavaScript有什么特點(diǎn)

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

關(guān)于如何在JavaScript中復(fù)制變量就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。