在寫敲代碼的時(shí)候雷则，經(jīng)常會(huì)出現(xiàn)，改變了一個(gè)變量的值肪笋，結(jié)果其他變量的值也一并改變了月劈，那么為什么會(huì)出現(xiàn)這種現(xiàn)象？
1涂乌、發(fā)生原理
前面介紹js數(shù)據(jù)類型時(shí)艺栈，有提到過，js數(shù)據(jù)類型分為基本類型和引用類型湾盒，基本類型存儲(chǔ)在棧中湿右，可以直接調(diào)用，引用類型存儲(chǔ)在堆中罚勾，棧中存引用（指向堆的地址）毅人。
當(dāng)我們進(jìn)行賦值操作時(shí)：
let a = 1;
let b = a;
瀏覽器在棧中創(chuàng)建變量a吭狡，并將其值設(shè)為1。緊接著丈莺，又創(chuàng)建了一個(gè)變量b划煮，將其值設(shè)為a的值1。
let a = {a:1};
let b = a;
瀏覽器在棧中創(chuàng)建變量a缔俄，在堆中保存{a:1}弛秋，并將棧中a變量的值設(shè)為堆中的引用（地址）0x1。緊接著俐载，在棧中創(chuàng)建變量b蟹略，并將a的值0x1賦給b。此時(shí)遏佣，a和b同時(shí)指向了堆中的數(shù)據(jù){a:1}挖炬。
總的來說，當(dāng)發(fā)生賦值操作時(shí)状婶，基本類型給本身意敛，引用類型給地址。
再回過去看文中開頭的問題膛虫，也就不難理解了草姻。當(dāng)數(shù)據(jù)為引用類型時(shí)，直接賦值走敌，并進(jìn)行修改碴倾，會(huì)改向堆中的同一份數(shù)據(jù)。所以導(dǎo)致其他使用這個(gè)數(shù)據(jù)的變量隨之改動(dòng)掉丽。
2跌榔、如何避免？（如何拷貝）
很多時(shí)候捶障，我們的需求是需要用一個(gè)變量去創(chuàng)建另一個(gè)全新的變量僧须，并不希望兩個(gè)變量聯(lián)動(dòng)。這里可以利用一些手段项炼，在堆中重新創(chuàng)建一份數(shù)據(jù)担平。也就是我們說的深淺拷貝《Р浚【針對(duì)引用類型】
1暂论、淺拷貝
淺拷貝會(huì)重新創(chuàng)建對(duì)象，但一般僅拷貝一層拌禾。如：
let a = {a: 'a', b: [1, 2, 3]};
let b = { ...a };
console.log(b); //{a: 'a', b: [1, 2, 3]};
b.a = 'b';
console.log(a); //{a: 'a', b: [1, 2, 3]};
console.log(b); //{a: 'b', b: [1, 2, 3]};
b.b.push(4);
console.log(a); //{a: 'a', b: [1, 2, 3, 4]};
console.log(b); //{a: 'b', b: [1, 2, 3, 4]};
通過代碼取胎，不難看出，淺拷貝可以創(chuàng)建新的對(duì)象，并對(duì)第一層存儲(chǔ)的數(shù)據(jù)賦值給新的對(duì)象中闻蛀。基本類型給本身匪傍，引用類型給地址。所以a.a與b.a完全分隔觉痛，a.b役衡，b.b，還存著同一個(gè)引用薪棒，指向同一份數(shù)據(jù)手蝎。
常用的淺拷貝方法有：
-
...擴(kuò)展運(yùn)算符（推薦）
eg:
let arr = [1, 2, 3]; let arrCopy = [...arr];
let obj = {a: 1, b: 1}; let objCopy = {...obj};
2、深拷貝
深拷貝會(huì)創(chuàng)建一份全新的對(duì)象俐芯，并為原始對(duì)象中的引用類型也創(chuàng)建一份新的對(duì)象柑船。即有幾層，拷貝幾層泼各。
常用的深拷貝方法有兩個(gè)：
（1）JSON.parse() + JSON.stringify()
原理：利用JSON.stringify()將原始對(duì)象轉(zhuǎn)換成JSON字符串，利用JSON.parse() 解析JSON字符串生成新的對(duì)象亏拉。
let obj = {a: 1, b: [1, 2, 3]};
let objCopy = JSON.parse(JSON.stringify(obj));
objCopy.b.push(4);
console.log(obj); //{a: 1, b: [1, 2, 3]};
console.log(objCopy); //{a: 1, b: [1, 2, 3, 4]};
通過JSON.parse() + JSON.stringify()能較為簡單的實(shí)現(xiàn)對(duì)象和數(shù)組的深拷貝扣蜻，但仍會(huì)存在很多問題。
-
局限
我們已經(jīng)了解到此方法會(huì)將原始對(duì)象轉(zhuǎn)換成JSON字符串及塘，緊接著再將JSON字符串解析生成新的對(duì)象莽使。那么在“對(duì)象->JSON字符串->對(duì)象”這一過程中，必然存在一些轉(zhuǎn)換的問題笙僚。
let obj = {
a: [1,2,3],
b: {a: 'a'},
c: new Date(),
d: /[a-z]/,
f: function a(){ alert(1) }
}
let objCopy = JSON.parse(JSON.stringify(obj));
console.log(obj);
// {
// a: [1, 2, 3],
// b: {a: 'a'},
// c: Tue Feb 23 2021 11:38:49 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間),
// d: /[a-z]/,
// f: ? a()
// }
console.log(objCopy);
// {
// a: [1, 2, 3],
// b: {a: 'a'},
// c: "2021-02-23T03:38:49.679Z"
// d: {},
// }
根據(jù)代碼芳肌，我們不難發(fā)現(xiàn)：針對(duì)基本數(shù)據(jù)類型、對(duì)象肋层、數(shù)組的時(shí)候亿笤，“JSON.parse(JSON.stringify(obj));”表現(xiàn)良好，但是針對(duì)日期Date栋猖、正則RegExp净薛、函數(shù)Function的時(shí)候，會(huì)出現(xiàn)問題蒲拉。
- Date
JSON.stringify()會(huì)將Date對(duì)象轉(zhuǎn)換成ISO日期格式的字符串肃拜，且JSON.parse()，并不會(huì)將其轉(zhuǎn)換成Date對(duì)象雌团。從而導(dǎo)致類型不一致燃领。 - RegExp
JSON.parse(JSON.stringify(obj));在處理正則的時(shí)候，會(huì)粗暴的直接將其轉(zhuǎn)換成空對(duì)象锦援，數(shù)據(jù)丟失猛蔽。 - Function
同理，JSON.parse(JSON.stringify(obj));在處理Function的時(shí)候雨涛，會(huì)將其轉(zhuǎn)換成undefined枢舶，數(shù)據(jù)丟失懦胞。
（2）利用遞歸手寫方法實(shí)現(xiàn)深拷貝
這部分內(nèi)容，需要綜合利用前文提到的知識(shí)點(diǎn)凉泄，進(jìn)行構(gòu)造躏尉，大家可以自行進(jìn)行嘗試。本文不進(jìn)行贅述后众，下個(gè)文章會(huì)單獨(dú)總結(jié)胀糜。
3、總結(jié)
- 改變了一個(gè)變量的值蒂誉，其他變量也一并改變的原因是引用類型數(shù)據(jù)教藻，棧中存放的是地址，兩個(gè)變量用了同一份堆中的數(shù)據(jù)右锨。
- 當(dāng)數(shù)據(jù)為引用類型時(shí)括堤，且想取消變量之間的關(guān)聯(lián)，需要用到深淺拷貝绍移。
- 當(dāng)數(shù)據(jù)僅有一層時(shí)悄窃，利用...擴(kuò)展運(yùn)算符能很簡單的實(shí)現(xiàn)數(shù)據(jù)的拷貝。
- 使用JSON.parse(JSON.stringify(obj));來進(jìn)行深拷貝時(shí)蹂窖，應(yīng)注意對(duì)象中轧抗，不能存在Date、RegExp瞬测、Function類型的數(shù)據(jù)横媚，不然會(huì)導(dǎo)致數(shù)據(jù)丟失。
