瞭解js的淺拷貝、深拷貝之前我們必須要了解js的資料型別以及他們在記憶體中的儲存方式

1：基礎型別

string、number、null、undefind、symbol

基礎型別的值是直接存在堆當中，傳的是值

2:引用型別

object

引用型別的值分兩步份、一份是值得地址存在堆當中、另外一部分值是存在棧當中

3：賦值

 1 var obj = { 
 2    name:"小劉",//str 型別
 3    age:1,//number 型別
 4    language:undefined,//undefined 型別
 5    weight:null,//null 型別
 6    hobby:['學習'],//
 
 object 型別（陣列）
 7    study:{ //object 型別
 8        math:89,
 9        english:98
10    }
11  } 
12  var obj1 = obj
13  obj1.name = "小華"
14  obj1.hobby[0] = '打遊戲'
15  obj1.weight = '90'
16  console.log(obj)
17 //  {
18 //   name: '小華',
19 //   age: 1,
20 //   language: undefined,
21 //   weight: '90',
22 //   hobby: [ '打遊戲' ],
 

23 //   study: { math: 89, english: 98 }
24 // }
25  console.log(obj1)
26 //  {
27 //   name: '小華',
28 //   age: 1,
29 //   language: undefined,
30 //   weight: '90',
31 //   hobby: [ '打遊戲' ],
32 //   study: { math: 89, english: 98 }
33 // }

obj、obj1 一毛一樣

4：淺拷貝

var obj = { 
   name:"小劉",//str 型別
   age:1,//number 型別
   language:undefined,//
 
undefined 型別
   weight:null,//null 型別
   hobby:['學習'],// object 型別（陣列）
   study:{ //object 型別
       math:89,
       english:98
   }
 } 
 function copy(obj){
     var newObj = {}
     for(var key in obj){
        if(obj.hasOwnProperty(key)){//遍歷自身屬性、忽略繼承屬性
            newObj[key] = obj[key]
        }
     }
     return newObj
 }
 var obj1 = copy(obj)
 obj1.name = "小華"
 obj1.hobby[0] = '打遊戲'
 obj1.weight = '90'
 console.log(obj)
//  {
//   name: '小劉',
//   age: 1,
//   language: undefined,
//   weight: null,
//   hobby: [ '打遊戲' ],
//   study: { math: 89, english: 98 }
// }
 console.log(obj1)
//  {
//   name: '小華',
//   age: 1,
//   language: undefined,
//   weight: '90',
//   hobby: [ '打遊戲' ],
//   study: { math: 89, english: 98 }
// }

從上面我們可以看到obj裡面得name這個資料型別是基礎型別得值改變了，但是hobby這個引用型別兩者都變化了。

如果我們想要做到引用型別也做到完全複製，就要使用深拷貝了。

4：深拷貝

 1 var obj = { 
 2    name:"小劉",//str 型別
 3    age:1,//number 型別
 4    language:undefined,//undefined 型別
 5    weight:null,//null 型別
 6    hobby:['學習'],// object 型別（陣列）
 7    study:{ //object 型別
 8        math:89,
 9        english:98
10    }
11  } 
12  function deepCopy(obj){
13      return JSON.parse(JSON.stringify(obj))
14  }
15  var obj1 = deepCopy(obj)
16  obj1.name = "小華"
17  obj1.hobby[0] = '打遊戲'
18  obj1.weight = '90'
19  console.log(obj)
20 // {
21 //   name: '小劉',
22 //   age: 1,
23 //   language: undefined,
24 //   weight: null,
25 //   hobby: [ '學習' ],
26 //   study: { math: 89, english: 98 }
27 // }
28  console.log(obj1)
29 // {
30 //   name: '小華',
31 //   age: 1,
32 //   weight: '90',
33 //   hobby: [ '打遊戲' ],
34 //   study: { math: 89, english: 98 }
35 // }