前言

要想對深淺拷貝理解透徹，那我們還真不能開門見山，我們還得先了解一下門，再找到鑰匙，把門打開后才會看到山，這樣一來你也就完全理解了山存在的意義；

因此我們要先了解一下中Js的資料型別以及存盤方式，就會再認識到什么是堆疊(stack)和堆(heap)，接下來你還會意識到物件的賦值和賦址的區別，然后會繼續探索對深淺拷貝的理解以及賦值和淺拷貝的區別，最后我們還要能手動實作物件的深淺拷貝；

事實上，深拷貝和淺拷貝是只針對Object和Array這樣的參考資料型別的，

那接下來我們也會圍繞以上提到的幾個知識點串聯一下，融會貫通，一步一步去探索和理解深淺拷貝；

Js資料型別和存盤

面試中第一個最常問到的就是讓我們說出Js有哪些資料型別了，這個大家都不陌生，有兩種資料型別，分別是基本資料型別和參考資料型別

基本資料型別

• 基本資料型別包括 String，Number，Boolean，Undefined，Null，Symbol（其中Symbol是ES6新增，表示獨一無二的值）
• 資料型別存盤在堆疊(stack)記憶體中的，資料大小確定，記憶體空間大小可以分配，

參考資料型別

• 參考型別統稱為Object，細分的話，分為5個：Object物件、Array陣列、RegExp正則、Date時間物件、Function函式
• 參考資料型別是存盤在堆(heap)記憶體中的物件，變數實際保存的是一個指標，這個指標指向另一個位置
• 每個記憶體空間大小不一樣，要根據情況開進行特定的分配

那什么是堆疊記憶體什么是堆記憶體，這兩種資料結構又是以什么的形式去存盤的呢，那接下來我們就一起去了解一下堆疊和堆；

堆疊(stack)和堆(heap)

在編譯階段，除了宣告變數和函式，查找環境中的識別符號這兩項作業之外，還會進行記憶體分配，不同型別的資料會分配到不同的記憶體空間；

堆疊記憶體
關于堆疊，你可以結合這么一個貼切的例子來理解，一條單車道的單行線，一端被堵住了，而另一端入口處沒有任何提示資訊，堵住之后就只能后進去的車子先出來，這時這個堵住的單行線就可以被看作是一個堆疊容器，車子開進單行線的操作叫做入堆疊，車子倒出去的操作叫做出堆疊，

所以，堆疊就是類似于一端被堵住的單行線，車子類似于堆疊中的元素，堆疊中的元素滿足后進先出的特點，（前面我還寫了一篇JavaScript的執行機制——呼叫堆疊，可供參考有助于更理解什么是堆疊）

• 堆疊主要用于來保存基本值和參考型別值的地址；
• 存放的變數一般都是已知大小或者已知上限范圍的，算是一種簡單存盤；
• 堆疊是自動分配的相對固定大小的記憶體空間，其資料讀取快，寫入速度快，但存盤內容少，變數一旦不使用就由系統自動清理釋放；

堆記憶體

堆的存取是隨意，這就如同我們在圖書館的書架上取書， 雖然書的擺放是有順序的，但是我們想取任意一本時不必像堆疊一樣，先取出前面所有的書， 我們只需要關心書的名字，

• 用來保存一組無序且唯一的參考型別值，可以使用堆疊中的鍵名來取得，
• 堆的讀取和寫入速度慢，但存盤的內容多，一般物件會存盤在堆中，存盤的資料對于大小在這方面都是未知的
• 堆是動態分配的記憶體，大小不定也不會自動釋放，

賦值和賦址的區別

前面之所以要說明什么是記憶體中的堆、堆疊以及變數型別，實際上就是為了更好的理解賦值，深拷貝以及淺拷貝；

基本型別與參考型別最大的區別實際就是賦值與賦址的區別，

賦值與賦址

為一個變數賦基本值時，實際上是創建一個新值，然后把該值賦給新變數，可以說這是一種真正意義上的" 賦值 “；

為一個變數賦參考值時，實際上是為新變數添加一個指標，指向堆記憶體中的一個物件，屬于一種” 賦址 "操作；

  var a = [1,2,3,4,5];
  var b = a;//賦址 ,把a的地址指標賦值給了b變數
  var c = a[0];//賦值，把物件中的屬性/陣列中的陣列項賦值給變數，這時變數C是基本資料型別，存盤在堆疊記憶體中
  alert(b);//1,2,3,4,5
  alert(c);//1

  //改變數值        
  b[4] = 6;
  c = 7;
  alert(a[4]);//6
  alert(a[0]);//1

從上面我們可以得知，當我改變b中的資料時，a中資料也發生了變化；但是當我改變c的資料值時，a卻沒有發生改變，

這就是賦值與賦址的區別，因為a是陣列，屬于參考型別，所以它賦予給b的時候傳的是堆疊中的地址（相當于新建了一個不同名“指標”），而不是堆記憶體中的物件，而c僅僅是從a堆記憶體中獲取的一個資料值，并保存在堆疊中，所以b修改的時候，會根據地址回到a堆中修改，c則直接在堆疊中修改，并且不能指向a堆記憶體中，

淺拷貝和深拷貝

所謂拷貝，就是賦值，把一個變數賦給另外一個變數，就是把變數的內容進行拷貝，把一個物件的值賦給另外一個物件，就是把一個物件拷貝一份，

基本型別資料賦值時，賦的是資料，所以不存在深拷貝和淺拷貝的問題；

淺拷貝
創建一個新的物件，不會指向同一個地址，這個物件有著原始物件屬性值的精確拷貝，就是物件的淺拷貝只會對“主”物件進行拷貝，拷貝的是物件屬性的基本型別的值，如果屬性是參考型別，拷貝的就是記憶體地址，拷貝的不深，所以稱為淺拷貝；

• 修改淺拷貝物件第一層的非物件參考類屬性，都不會影響原物件
• 由于淺拷貝不會拷貝物件里面的物件，“里面的物件”會和原物件共享記憶體，所以修改淺拷貝物件的子屬性物件里面的屬性，原物件也會受到影響

利用 for…in回圈實作淺拷貝

	let obj = {
	    name: '李四',
	    age: 20,
	    action: {
	        eat: '蘋果',
	        sing: '《安靜》'
	    },
	};
	
	let obj2 = {};
	for (let key in obj) {
	    obj2[key] = obj[key];
	}
	
	obj2.name = '小六';
	obj2.sex = '男';
	obj2.sction.eat = '草莓';
	
	console.log('obj', obj);
	// obj  {name: '李四',age: 20,action: {eat: '草莓',sing: "《安靜》"}}
	console.log('obj2', obj2);
	// obj2  {name: '小六',age: 20,action: {eat: '草莓',sing: "《安靜》"}，sex:‘男’}

利用Object.assign()方法

let obj = {
	    name: '李四',
	    age: 20,
	    action: {
	        eat: '蘋果',
	        sing: '《安靜》'
	    },
	};
	
    Object.assign(obj2, obj);
	
	obj2.name = '張三';
	obj2.sex = '男';
	obj2.sction.eat = '草莓';
	
	console.log('obj', obj);
	// obj  {name: '李四',age: 20,action: {eat: '草莓',sing: "《安靜》"}}
	console.log('obj2', obj2);
	// obj2  {name: '張三',age: 20,action: {eat: '草莓',sing: "《安靜》"}，sex:‘男’}

深拷貝

深拷貝不僅將元物件的各個屬性逐個復制，還將原物件各個屬性所包含的物件屬性也一次采用深復制的方法遞回復制到新物件上，所以修改拷貝后的物件不會影響原物件；

使用遞回的方式實作深拷貝

   function deepClone(obj){
          // 基本型別，直接賦值
          if( typeof obj != 'object' ){
              return  new_obj = obj
          }
          //參考型別 判斷拷貝型別是陣列還是物件
          var new_obj = Array.isArray(obj) ? [] : {};
           //陣列
          if(obj instanceof Array ){
              for(i = 0; i < obj.length; i++ ){
                  new_obj[i] = obj[i];
                  if(typeof new_obj[i] == 'object'){
                      deepClone(new_obj[i])
                  }
              }
          }else{ //物件
              for (let key in obj) {
                  if (obj.hasOwnProperty(key)) {
                      // 物件中的陣列和物件
                      if (typeof obj[key] == 'object') {
                          new_obj[key] = deepClone(obj[key]); 
                      }else{//物件中沒有參考型別
                          new_obj[key] = obj[key]
                      }  
                  }
              }
          }
          return new_obj;
      }

通過 JSON 物件實作深拷貝

• 這種方式無法拷貝 正則運算式，undefine，function

 //通過js的內置物件JSON來進行陣列物件的深拷貝
    function deepClone2(obj) {
      var _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
      return objClone;
    }

通過jQuery的extend方法實作深拷貝

• 第一個引數 true 為深拷貝，false 為淺拷貝

  var newArray = $.extend(true,[],array);

slice()、concat()對陣列進行深拷貝

	let arr = [1, 2, 3, 4, 5, 6];
	
	let arr2 = arr.slice(0);
	arr2[0] = 'Rose';
	arr2[1] = '女';
	
	let arr3 = arr.concat();
	arr3[0] = 'Tom';
	arr3[1] = '男';
	
	console.log('arr', arr); // [1, 2, 3, 4, 5, 6]
	console.log('arr2', arr2); // ["Rose", "女", 3, 4, 5, 6]
	console.log('arr3', arr3); // ["Tom", "男", 3, 4, 5, 6]

賦值、淺拷貝和深拷貝的區別

上面已經詳細的介紹了賦值，淺拷貝和深拷貝，不理解的可以再認真查看，為了更方便了解，下面我放上三者的記憶體圖：

賦值

淺拷貝

深拷貝

上面的記憶體圖是目前我按照個人的理解去畫的，如您參考時發現錯誤，請及時留言糾正，我們一起學習，一起進步；