js中淺拷貝和深拷貝以及深拷貝的實現

JavaScript ECMAScript · 發表 2019-03-05 15:09:00

摘要：前言：2019年的第一篇分享... 一、什麼是基本型別值和引用型別值？ ECMAScript包括兩個不同型別的值：基本資料型別和引用資料型別。基本資料型別指的是簡單的資料段，引用資料型別指的是有多個值構成的物件。當我們把變數賦值給一個變數時，解析器首先要確認的就是這個值...

前言：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的值並沒有改變。

以上就是我的一些個人的理解和靖藏使用的一些深拷貝的處理方法，僅供參考。

js中淺拷貝和深拷貝以及深拷貝的實現

您可能也會喜歡…