成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js中的數(shù)組深拷貝

lily_wang / 2210人閱讀

摘要：好久沒寫文章了，都感覺自己最近沒什么進(jìn)步啊，正愁不知道寫什么呢，這兩天的工作中偶然發(fā)現(xiàn)一個數(shù)組深拷貝的問題，正好可以拿出來說一說。難道之前我們對數(shù)組的深拷貝都被騙了。。。對于字符串?dāng)?shù)字及布爾值來說不是或者對象，會拷貝這些值到新的數(shù)組里。

好久沒寫文章了，都感覺自己最近沒什么進(jìn)步啊，正愁不知道寫什么呢，
這兩天的工作中偶然發(fā)現(xiàn)一個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";

在控制臺打印之后發(fā)現(xiàn)，尼瑪arr,newArr1,newArr2打印的東西完全一樣，完全一樣，完全一樣

[{name: "leon"},{age: "27"}];

說好的對數(shù)組進(jìn)行slice或concat操作都是拿出一塊新的內(nèi)存空間存放新的數(shù)組，而不是對原數(shù)組的引用呢。難道之前我們對數(shù)組的深拷貝都被“騙了”。。。
別擔(dān)心，下面，我們一步步來分析分析

從復(fù)制說起

拋開slice，concat方法不說，最原始復(fù)制一個數(shù)組的方法是什么

var arr = [1,2,3]
var newArr = arr

優(yōu)點：方便
缺點：由于數(shù)組是引用類型（不懂基本類型和引用類型的自行補課），修改了arr或者newArr中的一個會影響全部

既然大家都知道賦值的缺點，所以才有了slice，concat方法。
重點來了，搬好小板凳做好聽課：

slice 不修改原數(shù)組，只會返回一個淺復(fù)制了原數(shù)組中的元素的一個新數(shù)組。原數(shù)組的元素會按照下述規(guī)則拷貝：
如果該元素是個對象引用 （不是實際的對象），slice 會拷貝這個對象引用到新的數(shù)組里。兩個對象引用都引用了同一個對象。如果被引用的對象發(fā)生改變，則新的和原來的數(shù)組中的這個元素也會發(fā)生改變。
對于字符串、數(shù)字及布爾值來說（不是 String、Number 或者 Boolean 對象），slice 會拷貝這些值到新的數(shù)組里。在別的數(shù)組里修改這些字符串或數(shù)字或是布爾值，將不會影響另一個數(shù)組。
如果向兩個數(shù)組任一中添加了新元素，則另一個不會受到影響。

引用MDN中的話，翻譯成白話：
數(shù)組中的值如果是引用類型，對其進(jìn)行增刪改，會影響用slice復(fù)制的數(shù)組，
但是如果數(shù)組中的值是基本類型，就不會影響
現(xiàn)在回頭看開篇提出的那個問題，就很好理解了，因為數(shù)組里面是obj，而obj是引用類型，所以當(dāng)然修改了newArr，arr里面的值也修改了
其實，工作中遇到的很多奇奇怪怪的問題大部分都是對知識點的模棱兩可，仔細(xì)看文檔就能解決的問題，所以說學(xué)好技術(shù)有時候并沒有大家想的那么簡單，仔細(xì)仔細(xì)仔細(xì)，認(rèn)真認(rèn)真認(rèn)真能做到這兩點的人好少啊

解決方案

1、簡單粗暴：

newArr1 = JSON.parse(JSON.stringify(arr));

這種方式能夠滿足99%的深拷貝（如開篇的例子），但是對與RegExp類型和Function類型則無法完全滿足，而且不支持有循環(huán)引用的對象。

2、現(xiàn)成的lodash庫：_.cloneDeep

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88285.html

相關(guān)文章

  • Js之淺拷貝深拷貝與對象數(shù)組的遍歷

    摘要：判斷是深拷貝對象還是數(shù)組如果要拷貝的對象的屬性依然是個復(fù)合類型，遞歸運用遞歸，當(dāng)要拷貝的對象或者數(shù)組的屬性依然是個對象或者數(shù)組時，遞歸調(diào)用。遍歷對象聊完了深拷貝和淺拷貝，接下來說一下遍歷。 在js這門語言中，數(shù)據(jù)存放在堆中，而數(shù)據(jù)的引用的存放在棧中。 淺拷貝 我們說的淺拷貝，指的是，引用地址的拷貝，棧中兩塊不同的引用地址都指向了堆中同樣一塊區(qū)域。所以，我們通過一個地址修改了堆中的數(shù)據(jù)，...

    liangzai_cool 評論0 收藏0

  • 淺探js深拷貝和淺拷貝

    摘要：接下來就讓我們更細(xì)致的探究中的深淺拷貝?？偨Y(jié)以上對深拷貝和淺拷貝做了簡單的介紹，在深拷貝的實現(xiàn)上也只介紹了最簡單的實現(xiàn)形式，并未考慮復(fù)雜情況以及相應(yīng)優(yōu)化，想要對深拷貝有更深入的了解，需要大家花時間去深入研究，或者可以關(guān)注我后續(xù)文章的動態(tài)。 對象和數(shù)組的拷貝對我來說一直都是一個比較模糊的概念，一直有點一知半解，但是在實際工作中又偶爾會涉及到，有時候還會一不小心掉坑里，不知道大家有沒有同樣...

    habren 評論0 收藏0

  • JS專題之深淺拷貝

    摘要：在之前的文章專題之?dāng)?shù)據(jù)類型和類型檢測中我有講過，中的數(shù)據(jù)類型分為兩種，基本數(shù)據(jù)類型和引用數(shù)據(jù)類型，基本數(shù)據(jù)類型是保存在棧的數(shù)據(jù)結(jié)構(gòu)中的是按值訪問，所以不存在深淺拷貝問題。 前言 在開發(fā)過程中，偶爾會遇到這種場景，拿到一個數(shù)據(jù)后，你打算對它進(jìn)行處理，但是你又希望拷貝一份副本出來，方便數(shù)據(jù)對比和以后恢復(fù)數(shù)據(jù)。 那么這就涉及到了 JS 中對數(shù)據(jù)的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，...

    ASCH 評論0 收藏0

  • JS 中的深拷貝與淺拷貝

    摘要：什么是深拷貝淺拷貝見名知義，無論是深拷貝還是淺拷貝，都是的問題。使用如下以上就是關(guān)于中的深拷貝與淺拷貝的知識和如何進(jìn)行深拷貝的知識了，如果有錯或者有其他方式的話，歡迎在下面留言評論啦 前言 最近在寫項目的時候涉及到一些父子組件傳遞個對象或者數(shù)組通信啥的，或者是直接復(fù)制添加對象啥的，直接使用賦值的時候總會出錯。一查原來是淺拷貝的問題，就從網(wǎng)上找了點資料，匯總到這里來了。 1 什么是深拷貝...

    ztyzz 評論0 收藏0

  • ?搞不懂JS中賦值·淺拷貝·深拷貝的請看這里

    showImg(https://segmentfault.com/img/bVbvpCA); 前言 為什么寫拷貝這篇文章？同事有一天提到了拷貝，他說賦值就是一種淺拷貝方式，另一個同事說賦值和淺拷貝并不相同。我也有些疑惑，于是我去MDN搜一下拷貝相關(guān)內(nèi)容，發(fā)現(xiàn)并沒有關(guān)于拷貝的實質(zhì)概念，沒有辦法只能通過實踐了，同時去看一些前輩們的文章總結(jié)了這篇關(guān)于拷貝的內(nèi)容,本文也屬于公眾號【程序員成長指北】學(xué)習(xí)路線...

    lauren_liuling 評論0 收藏0

發(fā)表評論

0條評論

lily_wang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<