js中淺拷貝和深拷貝以及深拷貝的實現
前言:2019年的第一篇分享...
一、什麼是基本型別值和引用型別值?
ECMAScript包括兩個不同型別的值:基本資料型別和引用資料型別。
基本資料型別指的是簡單的資料段,引用資料型別指的是有多個值構成的物件。
當我們把變數賦值給一個變數時,解析器首先要確認的就是這個值是基本型別值還是引用型別值。
注: 要了解深拷貝和淺拷貝,首先要先理解ECMAScript中的資料型別,其中基本型別值(如undefined、null、number、string、boolean以及es6新增的Symbol), 還有一些引用型別值(如物件)。
淺拷貝和深拷貝一般是對於引用型別值(如物件)來講的,而基本型別值,只要是複製,就一定是另開闢以儲存空間。
1 // 示例1(基本型別值)) 2 var a = 10; 3 var b = a; 4 b = 20; 5 console.log(b); //輸出 20 6 console.log(a); //輸出 10 // 類似示例1,基本型別在拷貝的時候,b改變了,但是並不會印象到a。
1 // 示例2(引用型別值) 2 var obj_a = { a: 10, b: 20 }; 3 var obj_b = obj_a; 4 obj_b.a = 30; 5 console.log(obj_b); //輸出 { a: 30, b: 20 } 6 console.log(obj_a); //輸出 { a: 30, b: 20 } 7 8 // 類似示例2,複雜型別在拷貝的時候,然後改變了obj_b的屬性的值,但是卻改變了obj_a的,很明顯,這個結果並不是我們想要的,其實他們還是指向同一個物件,只是展示視窗的位置不同而已。
1 // 示例3(應用類值&深拷貝) 2 var obj_a = { a: 10, b: 20, c: 30 }; 3 var obj_b = { a: obj_a.a, b: obj_a.b, c: obj_a.c }; 4 obj_b.a = 40; 5 console.log(obj_b); //輸出 { a: 40, b: 20, c: 30 } 6 console.log(obj_a); //輸出 { a: 10, b: 20, c: 30 } 7 8 // 類似示例3,複雜型別在拷貝的時候,然後改變了obj_b的屬性的值,但是卻沒有改變了obj_a的,因為在拷貝的時候,其實是相當於新建了一個領地,然後遍歷舊物件的每一項的值,在新物件裡面新建每一項,然後把對應的值複製進去,他們是不同的物件,這就是所謂的深拷貝。
二、淺拷貝和深拷貝的原理
1.基本資料型別值( 基本資料型別值的名和值都存在棧記憶體裡面 )
如:let a = 1; 如圖:
當let b = a,b複製了a,棧記憶體會另外開闢一塊地方存放b的名值,如圖:
兩者互不干涉,誰也沒有影響到誰。
2.引用資料型別值( 引用資料型別值棧記憶體裡面存值的位置則存放的是a的值在堆記憶體裡面的位置,也就是唯一堆地址 )
如:let a = [ 0, 1, 2, 3, 4 ];如圖:
當let b = a,b複製了a,b引用了a的堆地址。如圖:
所以這個時候,改變了b,a也會受到影響。
<strong> </strong>
三、實現深拷貝
層級拷貝,遞迴方式(其實就是函式的自我呼叫)
何為層級?如,var a = [0,1,[3,4],3]; 陣列巢狀著陣列。
實現方法:
// 程式碼中加入判斷,當碰到陣列、物件等時遞迴函式 1 function deepClone(obj){ 2//定義物件來判斷當前的引數是陣列還是物件 3let objClone = Array.isArray(obj)?[]:{}; 4//如果obj存在並且為物件 5if(obj&&typeof obj == "object"){ 6for(let key in obj){ 7if(obj.hasOwnProperty(key)){ 8//如果obj的子元素為物件,那麼遞迴(層級遍歷) 9if(obj[key]&&typeof obj[key] == "object"){ 10objClone[key] = deepClone(obj[key]); 11}else{ 12//如果不是,直接賦值 13objClone[key] = obj[key]; 14} 15} 16} 17} 18return objClone; 19}
利用 jeury.extend() 淺拷貝&深拷貝
$.extend( [deep ], target, object1 [, objectN ] )
注:deep表示是否深拷貝,為true為深拷貝,為false,則為淺拷貝
target Object型別 目標物件,其他物件的成員屬性將被附加到該物件上。
object1 objectN可選。 Object型別 第一個以及第N個被合併的物件。
1 let a = [0, 1, [2, 3], 4], 2b = $.extend(true, [], a); 3 a[0] = 1; 4 a[2][0] = 1; 5 console.log(a, b);
通過ES6的concat()
方法
concat()
用於合併兩個或多個數組。此方法不會更改現有陣列,而是返回一個新陣列。
1 var a= [1,2,3] 2 var b = a.concat(); 3 b[2] =10; 4 console.log(a
上面這個情況a的值並沒有改變。
以上就是我的一些個人的理解和靖藏使用的一些深拷貝的處理方法,僅供參考。