深入理解 Javascript 之 JS的深淺拷貝

Tikitoo 發布于2019-08-23 10:55 / 366人閱讀

摘要：動手實現深拷貝利遞歸來實現對對象或數組的深拷貝。遞歸思路對屬性中所有引用類型的值進行遍歷，直到是基本類型值為止。深拷貝只對對象自有屬性進行拷貝測試數據拷貝方式其實也是一種繼承的方式，當然繼承還是有其他方法的感謝支持

深淺拷貝 基本類型 & 引用類型

ECMAScript中的數據類型可分為兩種：

基本類型：undefined,null,Boolean,String,Number,Symbol
引用類型：Object,Array,Date,Function,RegExp等

不同類型的存儲方式：

基本類型：基本類型值在內存中占據固定大小，保存在棧內存中
引用類型：引用類型的值是對象，保存在堆內存中，而棧內存存儲的是對象的變量標識符以及對象在堆內存中的存儲地址

不同類型的復制方式：

基本類型

基本類型：從一個變量向另外一個新變量復制基本類型的值，會創建這個值的一個副本，并將該副本復制給新變量

let foo = 1;
let bar = foo;
console.log(foo === bar); // -> true

// 修改foo變量的值并不會影響bar變量的值
let foo = 233;
console.log(foo); // -> 233
console.log(bar); // -> 1

引用類型：從一個變量向另一個新變量復制引用類型的值，其實復制的是指針，最終兩個變量最終都指向同一個對象

let foo = {
  name: "leeper",
  age: 20
}
let bar = foo;
console.log(foo === bar); // -> true

// 改變foo變量的值會影響bar變量的值
foo.age = 19;
console.log(foo); // -> {name: "leeper", age: 19}
console.log(bar); // -> {name: "leeper", age: 19}

深拷貝 & 淺拷貝

淺拷貝：僅僅是復制了引用，彼此之間的操作會互相影響

深拷貝：在堆中重新分配內存，不同的地址，相同的值，互不影響

淺拷貝

舉一個例子（）

  var me = {
      name: "zjj",
      age: 19,
      address: {
          home: "tianjin"
      }
  };
  
  var me_1 = {
      m_token: "new"
  };
  
  
  function extend(p, c){
      var c = c || {};
      
      for(var i in p) {
          c[i] = p[i];
      }
  }
  extend(me,me_1);

深拷貝

  var me = {
      name: "zjj",
      age: 19,
      address: {
          home: "tianjin"
      }
  };
  
  var me_1 = {
      m_token: "new"
  };
  
  
  function extend(p, c){
      var c = c || {};
      
      for(var i in p) {
          c[i] = p[i];
      }
  }


  function extendDeeply(p, c) {
    var c = c || {};
      
      for(var i in p) {
        if(typeof p[i] === "object") {
          // 引用類型需要遞歸實現深拷貝
          c[i] = (p[i].constructor === Array ) ? [] : {}
          extendDeeply(p[i], c[i]);
        } else {
          // 非引用類型直接復制即可
          c[i] = p[i];
        } 
      }
  }
  extendDeeply(me,me_1);

JSON.parse()和JSON.stringify()

JSON.stringify()：把一個js對象序列化為一個JSON字符串
JSON.parse()：把JSON字符串反序列化為一個js對象

let obj = {
  name: "leeper",
  age: 20,
  friend: {
    name: "lee",
    age: 19
  }
};
let copyObj = JSON.parse(JSON.stringify(obj));
obj.name = "Sandman";
obj.friend.name = "Jerry";
console.log(obj);
// -> {name: "Sandman", age: 20, friend: {age: 19,name: "Jerry"}}
console.log(copyObj);
// -> {name: "leeper", age: 20, friend: {age: 19,name: "lee"}}

綜上，JSON.parse()和JSON.stringify()是完全的深拷貝。

動手實現深拷貝利【遞歸】來實現對對象或數組的深拷貝。遞歸思路：對屬性中所有引用類型的值進行遍歷，直到是基本類型值為止。

// 深拷貝
function deepCopy(obj) {
  if (!obj && typeof obj !== "object") {
    throw new Error("error arguments");
  }
  // const targetObj = obj.constructor === Array ? [] : {};
  const targetObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    
    //只對對象自有屬性進行拷貝
    if (obj.hasOwnProperty(key)) {
      if (obj[key] && typeof obj[key] === "object") {
        targetObj[key] = deepCopy(obj[key]);
      } else {
        targetObj[key] = obj[key];
      }
    }
  }
  return targetObj;
}

// 測試數據
let a = {
    age: undefined,
    sex: Symbol("male"),
    jobs: function() {
        console.log("kkkk")
    },
    name: "yck"
}
var cloneA = deepCopy(a);
console.log(cloneA.age);
console.log(cloneA.sex);
cloneA.jobs();

拷貝方式其實也是一種繼承的方式，當然繼承還是有其他方法的！
（感謝支持！！）

云服務器 GPU云服務器深入理解webrtc之aec 深入理解javascript 深淺拷貝深入理解系列

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

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

深入理解JS深淺拷貝

摘要：深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后，在棧內存就有兩個指針指向堆內存同一個數據。結果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數超過了一層的話，那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結果是一樣。 JS中數據類型基本數據類型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用數據類型：...

JackJiang 2019-08-23 14:31 評論0 收藏0
JavaScript專題系列20篇正式完結！

摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發布第一篇文章，到月日發布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、類型判斷、拷貝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
js深淺復制

摘要：總結綜上所述，數組的深拷貝比較簡單，方法沒有什么爭議，對象的深拷貝，比較好的方法是用的方法實現，或者遞歸實現，比較簡單的深復制可以使用實現參考資料知乎中的深拷貝和淺拷貝深入剖析的深復制深淺復制對比因為JavaScript存儲對象都是存地址的，所以淺復制會導致 obj 和obj1 指向同一塊內存地址。我的理解是，這有點類似數據雙向綁定，改變了其中一方的內容，都是在原來的內存基礎上做...

Apollo 2019-08-19 18:44 評論0 收藏0
復習Javascript專題（四）：js中的深淺拷貝

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

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