首先，看著篇文章之前攘乒，先了解一下JavaScript的堆棧原理 JavaScript： 堆棧原理盼砍，本次編輯只驗(yàn)證一些簡單的方法裁眯，不錯(cuò)深入的底層探討生年，不考慮性能等。
深復(fù)制晋辆，淺復(fù)制
淺復(fù)制：
引用類型的 Array Json
const a = [0, 1, 2, 3 ];
const b = a;
console.log(a, b); // [0, 1, 2, 3 ] [0, 1, 2, 3 ]
// 只修改b 渠脉，但是a也會(huì)跟著改變
b.push(4);
console.log(a, b); // [0, 1, 2, 3, 4 ] [0, 1, 2, 3, 4 ]
淺復(fù)制， 只是復(fù)制了一個(gè)指針瓶佳。
先上一個(gè)簡單的數(shù)組芋膘。
const newArray = [ 'apple', 'orange', 'banana' ];
- 首先我想到的是循環(huán)，來完成復(fù)制：
const newArray2 =[];
newArray.forEach((item) => {
newArray2.push(item)
})
console.log(newArray, newArray2);
// [
// "apple",
// "orange",
// "banana"
// ]
// [
// "apple",
// "orange",
// "banana",
// ]
newArray2.push('grape');
console.log(newArray, newArray2);
// [
// "apple",
// "orange",
// "banana"
// ]
// [
// "apple",
// "orange",
// "banana",
// "grape"
// ]
哇哦霸饲，可以耶为朋，太棒了
在這里其他循環(huán)就不一一演示了，只給出結(jié)論：
簡單數(shù)組厚脉，for, map, forEach都可以习寸，當(dāng)然其他循環(huán)沒有嘗試，感興趣的可以去了解一下傻工。 注意一下霞溪，這里寫了是簡單數(shù)組，下面繼續(xù)討論中捆。
??????別著急還有下文鸯匹。
- Object.assign 復(fù)制：
const newArray2 = Object.assign([], newArray);
newArray2.push('grape');
console.log(newArray, newArray2);
// [
// "apple",
// "orange",
// "banana"
// ]
// [
// "apple",
// "orange",
// "banana",
// "grape"
// ]
Object.assign可以
- JSON.parse(JSON.stringify());
const newArray2 = JSON.prase(JSON.stringify(newArray))
newArray2.push('grape');
console.log(newArray, newArray2);
// [
// "apple",
// "orange",
// "banana"
// ]
// [
// "apple",
// "orange",
// "banana",
// "grape"
// ]
JSON.parse(JSON.stringify()); 可以；
敲黑板劃重點(diǎn)泄伪，重點(diǎn)殴蓬，重點(diǎn) ????。
來一個(gè)復(fù)雜一點(diǎn)的數(shù)組蟋滴。
const arrayJson = [
{ name: 'apple'},
{ name: 'orange'},
{ name: 'banana'},
}
const arrayJson1 = arrayJson.map((item) => {
return item;
});
arrayJson1.push({name: 'haha'});
arrayJson1[0].name = 'grape';
console.log(arrayJson, arrayJson1);
// [
// { name: "grape"},
// { name: "orange"},
// { name: "banana"}
// ]
// [
// { name: "grape"},
// { name: "orange"},
// { name: "banana"},
// {name: "haha"}
// ]
哇染厅，發(fā)生了什么痘绎？？肖粮？給arrayJson1中添加的一個(gè)項(xiàng)简逮，原始數(shù)組沒有添加，但是尿赚，改變數(shù)組的第一項(xiàng)，原始數(shù)組也改變了蕉堰。
這說明：使用循環(huán)復(fù)制凌净，的確是深度復(fù)制了，但是復(fù)制的僅僅是最外層的指針屋讶，復(fù)雜數(shù)組中的每一項(xiàng)都是一個(gè)引用類型冰寻，并沒有深度復(fù)制，只復(fù)制了每一項(xiàng)的指針皿渗。如果給新數(shù)組添加新的一項(xiàng)斩芭，原始數(shù)組沒有改變，但是如果試圖改變子項(xiàng)乐疆，原始數(shù)組也會(huì)跟著改變划乖。
直接上結(jié)論吧
for, map, forEach, Object.assign 都不好使。
復(fù)雜類型的數(shù)組沒有其他方法了嗎挤土？ 當(dāng)然有琴庵。下方高能
const arrayJson = [
{ name: 'apple'},
{ name: 'orange'},
{ name: 'banana'},
}
const arrayJson1 = JSON.parse(JSON.stringify(arrayJson));
arrayJson1.push({name: 'haha'});
arrayJson1[0].name = 'grape';
console.log(arrayJson, arrayJson1);
// [
// { name: "apple"},
// { name: "orange"},
// { name: "banana"}
// ]
// [
// { name: "grape"},
// { name: "orange"},
// { name: "banana"},
// {name: "haha"}
// ]
哈哈哈，太棒了仰美。
結(jié)論：JSON.parse(JSON.stringify()); 是一個(gè)完美的方法迷殿。
以上情況，沒有考慮到性能咖杂，執(zhí)行時(shí)間庆寺，只考慮能實(shí)現(xiàn)深度復(fù)制。
關(guān)于深度復(fù)制(拷貝)诉字， 情況有很多懦尝，可能還有什么情況沒有考慮到；實(shí)現(xiàn)方法可能也有很多奏窑，小生才疏學(xué)才导披，只是菜鳥，目前就了解到這么多埃唯。都是原創(chuàng)撩匕，如果有做的不對(duì)的地方，還請(qǐng)多多指教墨叛。
