JavaScript的深淺拷貝

zhjx922 發布于2019-08-26 11:32 / 2301人閱讀

摘要：實際上，是禁止這樣做的。傳值和傳址基本數據類型賦值基本數據類型的賦值是在內存中新開辟一段棧內存，然后再把再將值賦值到新的棧中。結果見輸出，可以看出來，無論是修改賦值得到的對象和淺拷貝得到的都會改變原始數據。

存儲問題：
深拷貝和淺拷貝的主要區別：在內存中的存儲類型（堆和棧）不同
堆：動態分配的內存，大小不定也不會自動釋放
棧：自動分配的內存，由系統自動釋放
數據類型：

基本數據類型：

 javascript的基本數據類型5種：undefined null  number  string boolean

存儲位置

棧。原因：數據大小確定，內存空間大小可以分配，是直接按值存放的。

值是否可變？

基本數據類型值不可變，javascript中的原始值（undefined、null、布爾值、數字和字符串）與對象（包括數組和函數）有著根本區別。原始值是不可更改的：任何方法都無法更改（或“突變”）一個原始值。對       數字和布爾值來說顯然如此 —— 改變數字的值本身就說不通，而對字符串來說就不那么明顯了，因為字符串看起來像由字符組成的數組，我們期望可以通過指定索引來假改字符串中的字符。實際上，javascript 是禁止這樣做的。字符串中所有的方法看上去返回了一個修改后的字符串，實際上返回的是一個新的字符串值。

基本類型的比較

基本類型的比較是值的比較，只要兩個變量的值相等就認為他們是相等的。
比較最好用 === ，因為 == 會進行類型轉換，例如:var a = 1; var b= true;if(a==b) 則會返回true

引用數據類型（object）：

存儲位置

堆。變量實際上是存放在棧內存中的一個指針，這個指針指向堆內存中的地址，每個空間大小不一樣，要根據情況進行特定的分配。

值是否可變？

引用類型值可變
var a = [1,2,3];
a[1] = 5;
console.log(a[1]); // 5

應用類型的比較

引用類型的比較是引用的比較
所以每次我們對 js 中的引用類型進行操作的時候，都是操作其對象的引用（保存在棧內存中的指針），所以比較兩個引用類型，是看其的引用是否指向同一個對象。
var a = [1,2,3];
var b = [1,2,3];
console.log(a === b); // false
雖然變量 a 和變量 b 都是表示一個內容為 1，2，3 的數組，但是其在內存中的位置不一樣，也就是說變量 a 和變量 b 指向的不是同一個對象，所以他們是不相等的。

傳值和傳址

基本數據類型賦值

    基本數據類型的賦值（=）是在內存中新開辟一段棧內存，然后再把再將值賦值到新的棧中。
    var a = 10;
    var b = a;
    a ++;
    console.log(a); // 11
    console.log(b); // 10

引用數據類型賦值

但是引用類型的賦值是傳址。只是改變指針的指向，例如，也就是說引用類型的賦值是對象保存在棧中的地址的賦值，這樣的話兩個變量就指向同一個對象，因此兩者之間操作互相有影響。
  var a = {};  // a保存了一個空對象的實例 
  var b = a; // a和b都指向了這個空對象 
  a.name = "jozo";
  console.log(a.name); // "jozo" 
  console.log(b.name); // "jozo" 
  b.age = 22; 
  console.log(b.age);  // 22 
  console.log(a.age);  // 22 
  console.log(a == b);// true

淺拷貝

那么賦值和淺拷貝有什么區別呢，我們看下面這個例子：

var obj1 = {
    "name" : "zhangsan",
    "age" :  "18",
    "language" : [1,[2,3],[4,5]],
};

var obj2 = obj1;


var obj3 = shallowCopy(obj1);
function shallowCopy(src) {
    var dst = {};
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            dst[prop] = src[prop];
        }
    }
    return dst;
}

obj2.name = "lisi";
obj3.age = "20";

obj2.language[1] = ["二","三"];
obj3.language[2] = ["四","五"];

console.log(obj1);  
//obj1 = {
//    "name" : "lisi",
//    "age" :  "18",
//    "language" : [1,["二","三"],["四","五"]],
//};

console.log(obj2);
//obj2 = {
//    "name" : "lisi",
//    "age" :  "18",
//    "language" : [1,["二","三"],["四","五"]],
//};

console.log(obj3);
//obj3 = {
//    "name" : "zhangsan",
//    "age" :  "20",
//    "language" : [1,["二","三"],["四","五"]],
//};

先定義個一個原始的對象 obj1，然后使用賦值得到第二個對象 obj2，然后通過淺拷貝，將 obj1 里面的屬性都賦值到 obj3 中。也就是說：

obj1：原始數據

obj2：賦值操作得到

obj3：淺拷貝得到

然后我們改變 obj2 的 name 屬性和 obj3 的 name 屬性，可以看到，改變賦值得到的對象 obj2 同時也會改變原始值 obj1，而改變淺拷貝得到的的 obj3 則不會改變原始對象 obj1。這就可以說明賦值得到的對象 obj2 只是將指針改變，其引用的仍然是同一個對象，而淺拷貝得到的的 obj3 則是重新創建了新對象。
然而，我們接下來來看一下改變引用類型會是什么情況呢，我又改變了賦值得到的對象 obj2 和淺拷貝得到的 obj3 中的 language 屬性的第二個值和第三個值（language 是一個數組，也就是引用類型）。結果見輸出，可以看出來，無論是修改賦值得到的對象 obj2 和淺拷貝得到的 obj3 都會改變原始數據。
這是因為淺拷貝只復制一層對象的屬性，并不包括對象里面的為引用類型的數據。所以就會出現改變淺拷貝得到的 obj3 中的引用類型時，會使原始數據得到改變。

深拷貝：將 B 對象拷貝到 A 對象中，包括 B 里面的子對象，

淺拷貝：將 B 對象拷貝到 A 對象中，但不包括 B 里面的子對象

深拷貝

深拷貝是對對象以及對象的所有子對象進行拷貝。

怎么進行深拷貝?
思路就是遞歸調用剛剛的淺拷貝，把所有屬于對象的屬性類型都遍歷賦給另一個對象即可
zepto深拷貝的例子
還需要繼續了解深拷貝的實現方案。

云服務器 GPU云服務器深淺拷貝 javascript淺拷貝 javascript深拷貝深淺

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107090.html

Javascript對象的深淺拷貝

摘要：開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。高級屬性修改深拷貝滿足對象的復制，淺拷貝影響原數組。關于對象的深淺拷貝，暫且探索到這里，后續有新發現再進行補充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。其實都是copy。 ...

qieangel2013 2019-08-22 16:12 評論0 收藏0
JavaScript專題之深淺拷貝

摘要：專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如返回一個新數組的特性來實現拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶！數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 評論0 收藏0
JavaScript的深淺拷貝

摘要：什么是深淺概念深拷貝淺拷貝只針對像這樣的對象，對于基本類型而言，可以理解為是沒有深淺的區別的。和指向了同一塊內存深拷貝重新開辟了一個空間，修改對象的屬性，彼此不會影響。并不會更改使用遞歸適用于對象里面有對象什么是深淺概念深拷貝、淺拷貝只針對像Object/Array這樣的對象，對于基本類型而言，可以理解為是沒有深淺的區別的。淺拷貝復制的是引用，修改對象的屬性，會彼此影響。 ju...

zhunjiee 2019-08-22 15:55 評論0 收藏0
javascript之深淺拷貝

摘要：為何寫最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。深拷貝如果給放到新的內存中，將的各個屬性都復制到新內存里，就是深拷貝。安全的值是指能夠呈現為有效格式的值。參考文檔冴羽的專題之深淺拷貝深拷貝與淺拷貝的實現為何寫：最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。廢話不多說，我們來一起復習一下吧，也希望留下您寶貴意見。何為深淺拷貝？...

LMou 2019-08-26 11:34 評論0 收藏0
深淺拷貝

摘要：深復制實現代碼如下第一種方法通過遞歸解析解決第二種方法通過解析解決作者六師兄鏈接原生深拷貝的實現處理未輸入新對象的情況通過方法構造新的對象深淺拷貝針對的是對象類型，如果是字符串的數組用[...arr]，還是不會影響要區分針對數組的深淺拷貝(默認情況為里面沒有對象的數組)，與針對對象的深淺拷貝 JavaScript數組深拷貝和淺拷貝的兩種方法 let a1 = [1, 2]; ...

Karrdy 2019-08-23 15:42 評論0 收藏0
復習Javascript專題（四）：js中的深淺拷貝

摘要：基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對，這類引用類型數據。它會拋棄對象的。另外，查資料過程中還看到這么一個詞結構化克隆算法還有這一篇資料也有參考，也寫得比較詳細了的深淺拷貝基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對Object，Array這類引用類型數據。淺拷貝對于字符串來說，是值的復制，而對于對象來說則是對對象地址的復制；而深拷貝的話，它不...

MobService 2019-08-23 13:40 評論0 收藏0