數組與對象的深淺復制

1.JavaScript中的數組是一種特殊的對象。作為索引的數字在內部被轉換為字符串類型，這是因為JavaScript對象的屬性名必須是字符串。

  所以數組只是一種特殊的對象。

 

2.數組的淺復制與深復制

淺復制：

var nums=[1,2,3]; var samenums=nums; nums[0]=0; console.log(samenums[0]); //0 這里是0，而不是復制過來時候的1.

這就是淺復制，被賦值數組不過是一個指向原有數組的引用而已。

所以原數組改變，新賦值數組也會改變。

這樣的情況有時候會影響我們的操作，也會不是我們所期望的。

 

深復制：

這時候我們就要進行深復制了。

方法一：遍歷復制

for(var i=0;i<nums.length;i++){ samenums[i]=nums[i]; } 這時候我們再：nums[0]=0; console.log(samenums[0])    //1，這里依舊是1.

 

方法二：slice,slice(0)巧辦法進行修改，返回的是一個副本。

 

var a=[1,2]; var b= a.slice(0); a[0]=10; alert(b[0])    //1

 

三：對象的深淺復制

var a={ ao:1, at:2 } var b=a; a.ao=2; alert(b.ao) //2 因為進行的是淺復制。

 

對象的深復制，

一種是遍歷。

還有一個是jQuery的$.extend(a,b)。 

 

var a={ name: "John", location:{ city:"Boston", county:"USA" } } var b={}; $.extend(b,a); //這里是直接將a對象合並到b對象中去
a.name="zqz"; console.log(b.name); //依舊為 John 

 

***************

$.extend()是對jQuery的直接擴展

$.fn.extend()是對jQuery的實例對象的擴展

***************

 

四：問題衍生

這里引出一個問題：

$.extend()的問題！

extend(dest,src1,src2,src3...) 　　　　　 含義是：將src1,src2,src3...合並到dest中

extend(boolean,dest,src1,src2,src3...)     //深度拷貝與淺拷貝

extend(true,dest,src1,src2,src3...)    　　 //深度拷貝，會連src中的嵌套的對象也進行合並

extend(false,dest,src1,src2,src3...)           //淺拷貝，不會將src中的嵌套的對象也進行合並

 

不管是哪種extend的操作，都會涉及合並問題。那個這個合並規則又是什么呢？我們不去人雲亦雲。直接用例子，自己找。

 

第一種：dest不是空對象，是個已經有屬性的對象。extend(dest,src1)

   

var a={ name: "leslie", location:{ city:"beijing", county:"china" } } var b={ name:'zqz', location:{ city:'beijing', county:'mars', work:'ito' } }; $.extend(b,a); console.log(b); //結果：
{ location:{ city:"beijing", county:"china" }, name:"leslie" }

 

結果：a與b有相同項：a覆蓋b,即使b中的內嵌對象也會覆蓋a中的內嵌對象

          a與b有不同項：a一樣覆蓋b，也就是說，不管b中有多少不同項（多出項或少出項），都是以a的為准。

--以覆蓋項(a)為尊！

 

第二種：dest不是空對象，是個已經有屬性的對象。extend(dest,src1,src2)

var a={ name: "leslie", location:{ city:"beijing", county:"china" } } var b={ name:'zqz', location:{ city:'beijing', county:'mars', work:'ito' } } var c={ location:{ city:'wuhan', county:'mars', work:'itos', hobby:'study' } } $.extend(a,b,c); console.log(a); //結果
a={ location:{ city:'wuhan', county:'mars', work:'itos', hobby:'study' }, name:'zqz' }

**反正a的‘優先級’最低，只要前面頭相同的項時候，都會直接被覆蓋。然后向b推移。

 

 

（下面關於extend的深度與淺拷貝：摘自RascallySnake的jQuery.extend 函數詳解）

五、Jquery的extend方法還有一個重載原型：  

extend(boolean,dest,src1,src2,src3...)

   第一個參數boolean代表是否進行深度拷貝，其余參數和前面介紹的一致，什么叫深層拷貝，我們看一個例子：

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } ); 

   我們可以看出src1中嵌套子對象location:{city:"Boston"},src2中也嵌套子對象location:{state:"MA"},第一個深度拷貝參數為true，那么合並后的結果就是： 

result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}

   也就是說它會將src中的嵌套子對象也進行合並，而如果第一個參數boolean為false，我們看看合並的結果是什么，如下：

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
                    ); 

     那么合並后的結果就是:

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}