js深拷貝與淺拷貝的區別及實現

參考：

https://blog.csdn.net/flyingpig2016/article/details/52895620

https://www.cnblogs.com/chengguanhui/p/4737413.html

https://www.zhihu.com/question/23031215

 

　　要了解其本質區別，就須要瞭解堆和棧，值與引用的概念及區別

1.堆（stack）和棧（heap）

stack爲自動分配的內存空間，它由系統自動釋放；而heap則是動態分配的內存，大小不定也不會自動釋放。

2.值與引用

js中有基本數據類型和引用類型；

基本數據類型的變量和值都是存放在棧中，聲明以後會分配一塊內存區域，基本數據類型之間的賦值是直接把棧內存中存的值賦值給變量（傳值）

引用類型的變量存在棧中，但值是存在堆中，實際上棧存放的是指向堆中的地址，也叫引用，引用類型直接的賦值實質是把引用賦值給一個變量（傳址），因此其指向的堆內存中的值是同樣的

 3.深拷貝和淺拷貝

深拷貝和淺拷貝的使用場景是在複雜對象裏，即對象的屬性仍是對象，

淺拷貝是指只複製一層對象，當對象的屬性是引用類型時，實質複製的是其引用，當引用指向的值改變時也會跟着變化

例如：

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

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

//當一個對象屬性的引用值改變時將致使另外一個也改變
shallowObj.arr[1] = 5;
obj.arr[1]   // = 5

深拷貝是指複製對象的全部層級，實現方法

（1）經過遞歸實現

deepCopy(o) {
    if (o instanceof Array) {
      let n = [];
      for (let i = 0; i < o.length; ++i) {
        n[i] =deepCopy(o[i]);
      }
      return n;
    } else if (o instanceof Object) {
      let n = {}
      for (let i in o) {
        n[i] = deepCopy(o[i]);
      }
      return n;
    } else {
      return o;
    }
  }

（2）經過JSON解析實現

//把一個對象轉成json字符串在轉成json對象
JSON.parse(JSON.stringify(o))