JS對象和數組深淺拷貝總結②

在實際開發中遇到過太屢次深拷貝淺拷貝的問題。總結一下~

JS數據存儲和深淺拷貝實際運用①

這是以前寫過的一篇文章，解決淺拷貝深拷貝的問題只說了一種方法，今天來補充一下。

介紹深拷貝和淺拷貝都在上一篇文章裏介紹過了，在上一篇文章裏只寫了一個針對於數組的一種深拷貝，今天總結一下 js中對象和數組的深淺拷貝。具體的場景已經在上一篇文章裏說明了。

這裏廢話一下上一篇文章中出現的問題：一個表格數據，能夠點擊編輯彈出表單數據，修改數據後點擊取消或者關閉表單時，表格的數據會變空，解決的思路就是當我點擊表單顯示的時候，定義一箇中間變量存儲當前表單的數據。點擊取消按鈕或者關閉表單時，把以前定義的這個中間變量從新賦值給當前的表單數據。就能夠解決啦~
固然這個問題仍是因爲對象或者數組的深淺拷貝的問題。因此今天來總結一下對象和數組的深拷貝和淺拷貝的經常使用方法。

首先來介紹一下對象的淺拷貝

1.最傳統的淺拷貝

 var gogo = {
    name: '小明',
  }
  var out = {}
  out = gogo
  console.log(gogo)  //{name: "小明"}
  console.log(out)   //{name: "小明"}
  out.name = '小花花'
  console.log(gogo) //{name: "小花花"}
  console.log(out)  //{name: "小花花"}

　　

當我改變out的值的時候gogo裏也改變了~
2.Object.assign()
這個方法是es6的新方法，用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。目標對象就是Object.assign()，括號裏的第一個參數。

注意，Object.assign能夠用來處理數組，可是會把數組視爲對象。

說完了對象的淺拷貝說一下深拷貝
1.轉換成json再轉換成對象實現對象的徹底深拷貝（此方法適用於數組的深拷貝，也是比較簡單快速的深拷貝方法）

var out= {
  name: '小花花',
  sex: 'man',
  old: '18'
}
var gogo= JSON.parse(JSON.stringify(out))

　　

這種方式目前是最受推崇的徹底深拷貝寫法。
可是這樣容易形成數據丟失，由於若是對象中含有Date, function, undefined, Infinity, RegExp, Map, Set, Blob, FileList, ImageData, sparse Array, Typed Array等複雜對象的話，轉化成json再轉回來後這些數據都丟失了。。。

2.擴展運算符

var out= {
  name: '小花花',
  sex: 'man',
  old: '18'
}
var { ...gogo} = out
 console.log(gogo) //{name: "小花花", sex: "man", old: "18"}
  console.log(out)   //{name: "小花花", sex: "man", old: "18"}
  out.name = '大花花花花花'
  console.log(gogo)  //{name: "小花花", sex: "man", old: "18"}
  console.log(out) // { name: "大花花花花花", sex: "man", old: "18" }

　　

介紹完對象的深淺拷貝以後接下來講一下數組

1. concat() slice() 實現一維數組的深拷貝，多維數組不行。

   var array1 = ['a',1,true,{name:'lei',age:18}];
   
   //concat()  slice() 實現淺拷貝
   
   var array2 = array1.concat()
    
   //修改拷貝後的數據
   
   array2[0] = 'b';            //array1[0]是原始數據類型 因此是直接賦值的
   
   array2[3].name = 'zhang';   //array1[3]是對象數據類型 因此拷貝的是對象的引用，其實仍是和原數組使用同一對象
   
   console.log(array1);   //  ['a',1,true,{name:'zhang',age:18}]
   

   　　

   2.遞歸（目前有點難度因此之後再補充） 深拷貝

   3.針對於多維數組的jq方法 深拷貝
   jQuery.extend()

   傳送門：https://www.runoob.com/jquery/misc-extend.html