資訊專欄INFORMATION COLUMN
摘要：好久沒寫文章了，都感覺自己最近沒什么進(jìn)步啊，正愁不知道寫什么呢，這兩天的工作中偶然發(fā)現(xiàn)一個(gè)數(shù)組深拷貝的問題，正好可以拿出來說一說。難道之前我們對(duì)數(shù)組的深拷貝都被騙了。。。對(duì)于字符串?dāng)?shù)字及布爾值來說不是或者對(duì)象，會(huì)拷貝這些值到新的數(shù)組里。
好久沒寫文章了，都感覺自己最近沒什么進(jìn)步啊，正愁不知道寫什么呢，
這兩天的工作中偶然發(fā)現(xiàn)一個(gè)js數(shù)組深拷貝的問題，正好可以拿出來說一說。
const arr = [{name: "wens"},{age: "26"}]; //原數(shù)組
const newArr1 = arr.slice(0);
const newArr2 = arr.concat();
newArr2[0].name = "leon"; newArr2[1].age = "27";
在控制臺(tái)打印之后發(fā)現(xiàn)，尼瑪arr,newArr1,newArr2打印的東西完全一樣，完全一樣，完全一樣
[{name: "leon"},{age: "27"}];
說好的對(duì)數(shù)組進(jìn)行slice或concat操作都是拿出一塊新的內(nèi)存空間存放新的數(shù)組，而不是對(duì)原數(shù)組的引用呢。難道之前我們對(duì)數(shù)組的深拷貝都被“騙了”。。。
別擔(dān)心，下面，我們一步步來分析分析
拋開slice，concat方法不說，最原始復(fù)制一個(gè)數(shù)組的方法是什么
var arr = [1,2,3] var newArr = arr
優(yōu)點(diǎn)：方便
缺點(diǎn)：由于數(shù)組是引用類型（不懂基本類型和引用類型的自行補(bǔ)課），修改了arr或者newArr中的一個(gè)會(huì)影響全部
既然大家都知道賦值的缺點(diǎn)，所以才有了slice，concat方法。
重點(diǎn)來了，搬好小板凳做好聽課：
slice 不修改原數(shù)組，只會(huì)返回一個(gè)淺復(fù)制了原數(shù)組中的元素的一個(gè)新數(shù)組。原數(shù)組的元素會(huì)按照下述規(guī)則拷貝：
如果該元素是個(gè)對(duì)象引用 （不是實(shí)際的對(duì)象），slice 會(huì)拷貝這個(gè)對(duì)象引用到新的數(shù)組里。兩個(gè)對(duì)象引用都引用了同一個(gè)對(duì)象。如果被引用的對(duì)象發(fā)生改變，則新的和原來的數(shù)組中的這個(gè)元素也會(huì)發(fā)生改變。
對(duì)于字符串、數(shù)字及布爾值來說（不是 String、Number 或者 Boolean 對(duì)象），slice 會(huì)拷貝這些值到新的數(shù)組里。在別的數(shù)組里修改這些字符串或數(shù)字或是布爾值，將不會(huì)影響另一個(gè)數(shù)組。
如果向兩個(gè)數(shù)組任一中添加了新元素，則另一個(gè)不會(huì)受到影響。
引用MDN中的話，翻譯成白話：
數(shù)組中的值如果是引用類型，對(duì)其進(jìn)行增刪改，會(huì)影響用slice復(fù)制的數(shù)組，
但是如果數(shù)組中的值是基本類型，就不會(huì)影響
現(xiàn)在回頭看開篇提出的那個(gè)問題，就很好理解了，因?yàn)閿?shù)組里面是obj，而obj是引用類型，所以當(dāng)然修改了newArr，arr里面的值也修改了
其實(shí)，工作中遇到的很多奇奇怪怪的問題大部分都是對(duì)知識(shí)點(diǎn)的模棱兩可，仔細(xì)看文檔就能解決的問題，所以說學(xué)好技術(shù)有時(shí)候并沒有大家想的那么簡單，仔細(xì)仔細(xì)仔細(xì)，認(rèn)真認(rèn)真認(rèn)真能做到這兩點(diǎn)的人好少啊
1、簡單粗暴：
newArr1 = JSON.parse(JSON.stringify(arr));
這種方式能夠滿足99%的深拷貝（如開篇的例子），但是對(duì)與RegExp類型和Function類型則無法完全滿足，而且不支持有循環(huán)引用的對(duì)象。
2、現(xiàn)成的lodash庫：_.cloneDeep
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88285.html
摘要：判斷是深拷貝對(duì)象還是數(shù)組如果要拷貝的對(duì)象的屬性依然是個(gè)復(fù)合類型，遞歸運(yùn)用遞歸，當(dāng)要拷貝的對(duì)象或者數(shù)組的屬性依然是個(gè)對(duì)象或者數(shù)組時(shí)，遞歸調(diào)用。遍歷對(duì)象聊完了深拷貝和淺拷貝，接下來說一下遍歷。 在js這門語言中，數(shù)據(jù)存放在堆中，而數(shù)據(jù)的引用的存放在棧中。 淺拷貝 我們說的淺拷貝，指的是，引用地址的拷貝，棧中兩塊不同的引用地址都指向了堆中同樣一塊區(qū)域。所以，我們通過一個(gè)地址修改了堆中的數(shù)據(jù)，...
摘要：接下來就讓我們更細(xì)致的探究中的深淺拷貝。總結(jié)以上對(duì)深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實(shí)現(xiàn)上也只介紹了最簡單的實(shí)現(xiàn)形式，并未考慮復(fù)雜情況以及相應(yīng)優(yōu)化，想要對(duì)深拷貝有更深入的了解，需要大家花時(shí)間去深入研究，或者可以關(guān)注我后續(xù)文章的動(dòng)態(tài)。 對(duì)象和數(shù)組的拷貝對(duì)我來說一直都是一個(gè)比較模糊的概念，一直有點(diǎn)一知半解，但是在實(shí)際工作中又偶爾會(huì)涉及到，有時(shí)候還會(huì)一不小心掉坑里，不知道大家有沒有同樣...
摘要：在之前的文章專題之?dāng)?shù)據(jù)類型和類型檢測中我有講過，中的數(shù)據(jù)類型分為兩種，基本數(shù)據(jù)類型和引用數(shù)據(jù)類型，基本數(shù)據(jù)類型是保存在棧的數(shù)據(jù)結(jié)構(gòu)中的是按值訪問，所以不存在深淺拷貝問題。 前言 在開發(fā)過程中，偶爾會(huì)遇到這種場景，拿到一個(gè)數(shù)據(jù)后，你打算對(duì)它進(jìn)行處理，但是你又希望拷貝一份副本出來，方便數(shù)據(jù)對(duì)比和以后恢復(fù)數(shù)據(jù)。 那么這就涉及到了 JS 中對(duì)數(shù)據(jù)的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，...
摘要：什么是深拷貝淺拷貝見名知義，無論是深拷貝還是淺拷貝，都是的問題。使用如下以上就是關(guān)于中的深拷貝與淺拷貝的知識(shí)和如何進(jìn)行深拷貝的知識(shí)了，如果有錯(cuò)或者有其他方式的話，歡迎在下面留言評(píng)論啦 前言 最近在寫項(xiàng)目的時(shí)候涉及到一些父子組件傳遞個(gè)對(duì)象或者數(shù)組通信啥的，或者是直接復(fù)制添加對(duì)象啥的，直接使用賦值的時(shí)候總會(huì)出錯(cuò)。一查原來是淺拷貝的問題，就從網(wǎng)上找了點(diǎn)資料，匯總到這里來了。 1 什么是深拷貝...
showImg(https://segmentfault.com/img/bVbvpCA); 前言 為什么寫拷貝這篇文章？同事有一天提到了拷貝，他說賦值就是一種淺拷貝方式，另一個(gè)同事說賦值和淺拷貝并不相同。我也有些疑惑，于是我去MDN搜一下拷貝相關(guān)內(nèi)容，發(fā)現(xiàn)并沒有關(guān)于拷貝的實(shí)質(zhì)概念，沒有辦法只能通過實(shí)踐了，同時(shí)去看一些前輩們的文章總結(jié)了這篇關(guān)于拷貝的內(nèi)容,本文也屬于公眾號(hào)【程序員成長指北】學(xué)習(xí)路線...
閱讀 2853·2021-11-22 15:22
閱讀 19264·2021-09-22 15:00
閱讀 1443·2021-09-07 09:58
閱讀 1245·2019-08-30 13:01
閱讀 2438·2019-08-29 16:27
閱讀 2353·2019-08-26 13:25
閱讀 1625·2019-08-26 12:13
閱讀 944·2019-08-26 11:53
