一.前言

我們知道，在JS中數(shù)據(jù)類型按照訪問(wèn)方式和存儲(chǔ)方式的不同可分為基本類型和引用類型。

基本類型

基本類型有String、Boolean、Number,Undefined、Null，這些基本類型都是按值傳遞的，也稱為值類型。

引用類型

引用類型有對(duì)象、數(shù)組、函數(shù)，它們都是按引用訪問(wèn)的。

二.存儲(chǔ)方式區(qū)別

基本類型和引用類型由于兩者在內(nèi)存中存儲(chǔ)的方式不同，造成兩者訪問(wèn)的方式也不同。其中，基本類型存儲(chǔ)在內(nèi)存的棧中，是按值訪問(wèn)；引用類型存儲(chǔ)在內(nèi)存的堆中，是按引用訪問(wèn)。可如下圖所示：

當(dāng)有

 var n1 = 10;
 var n2 = 10;
 var arr1 = [1,2,3,4]
 var arr2 = [1,2,3,4]

其在內(nèi)存中存儲(chǔ)方式如圖：

值類型是在棧中直接保存的變量的實(shí)際值，而引用類型在棧中僅僅保存的是變量指向堆中的地址，從上圖中可以看出，值類型的變量n1和n2都是10，但是在棧中卻為這兩個(gè)變量分別開(kāi)辟了兩塊空間來(lái)存儲(chǔ)，而引用類型的變量arr1和arr2也相同，但是在堆中僅僅開(kāi)辟了一塊內(nèi)存來(lái)存儲(chǔ)，而在棧中存儲(chǔ)的是這兩個(gè)變量指向堆中的地址，這兩個(gè)變量都指向堆中的同一片地址。

三.拷貝區(qū)別

正是由于兩者在存儲(chǔ)方式上的不同，造成了兩者在拷貝時(shí)的差異。首先，先看兩段代碼：

 var n1 = 10;
 //將n1拷貝給n2
 var n2 = n1;
 n1 = 12;
 console.log(n1);
 console.log(n2);

先定義變量n1=10，然后將n1拷貝給n2，再接著改變n1的值為12，分別打印n1和n2的值，打印結(jié)果為：

從結(jié)果中我們可以看到，n1變?yōu)?2了，但是n2不受影響，依舊是10。

再看另外一段代碼：

 var arr1 = [1,2,3,4]
 //將arr1拷貝給arr2
 var arr2 = arr1;
 //向arr1中尾部添加一個(gè)元素5
 arr1.push(5); 
 console.log(arr1);
 console.log(arr2);

先定義數(shù)組arr1，然后將arr1拷貝給arr2，再接著向arr1中尾部追加一個(gè)元素，分別打印arr1和arr2的值，打印結(jié)果為：

從結(jié)果中我們可以看到：我們先將arr1拷貝給了arr2，但是當(dāng)我們改變arr1時(shí)，arr2也跟著一起改變了。這印證了前文所說(shuō)的，arr1和arr2實(shí)際上是指向了內(nèi)存中的同一片地址，當(dāng)arr1發(fā)生變化時(shí)，實(shí)際上是將指向的這片內(nèi)存地址中的數(shù)據(jù)變化了，而arr2也指向的是這片地址，所以arr2也會(huì)跟著變化。

上面代碼中的arr2=arr1，就是我們俗稱的淺拷貝，淺拷貝僅僅拷貝的是變量名，其在內(nèi)存的存儲(chǔ)沒(méi)有被拷貝，指向的還是同一片內(nèi)存地址，這就是造成了一個(gè)變化另外一個(gè)也跟著變化，這在日常開(kāi)發(fā)中不是我們想要的。

那如何實(shí)現(xiàn)真正的拷貝呢？

四.實(shí)現(xiàn)深拷貝

真正的拷貝，就是拷貝過(guò)后，arr1和arr2指向的不再是同一片內(nèi)存地址，而是分別指向各自的地址，這樣發(fā)生變化的時(shí)候就不會(huì)出現(xiàn)同時(shí)變化，這就是深拷貝。

下面我們封裝一個(gè)深拷貝函數(shù)，來(lái)實(shí)現(xiàn)引用類型的深拷貝：

 //參數(shù)p為原對(duì)象
 //參數(shù)c為原對(duì)象的類型，若原對(duì)象為數(shù)組，則傳入c為[],若原對(duì)象是對(duì)象傳入c為{}，也可不傳默認(rèn)為{}
 function deepCopy(p,c){
 var c = c || {};
 for(var i in p){
 　　if(typeof p[i] === "object"){
 　　　　c[i] = (p[i].constructor === Array)?[]:{};
 　　　　deepCopy(p[i],c[i])
 　　　　}else{
 　　　　c[i] = p[i]
　　 　}
 　　}
 　　return c;
 }

五.測(cè)試

 //參數(shù)p為原對(duì)象
 //參數(shù)c為原對(duì)象的類型，若原對(duì)象為數(shù)組，則傳入c為[],若原對(duì)象是對(duì)象傳入c為{}，也可不傳默認(rèn)為{}
 function deepCopy(p,c){
 var c = c || {};
 for(var i in p){
 　　if(typeof p[i] === "object"){
 　　　　　c[i] = (p[i].constructor === Array)?[]:{};
 　　　　　deepCopy(p[i],c[i])
 　　　　}else{
 　　　　　　c[i] = p[i]
 　　　　}
 　　}
 　　return c;
 }
 //定義數(shù)組arr1
 var arr1 = [1,2,3,4]
 //將arr1拷貝給arr2
 var arr2 = deepCopy(arr1,[]);
 //向arr1中尾部添加一個(gè)元素5
 arr1.push(5);
 console.log('arr1:',arr1);
 console.log('arr2:',arr2);

測(cè)試結(jié)果：

結(jié)果中可以看到，arr1變化沒(méi)有引起arr2的變化，實(shí)現(xiàn)了真正的拷貝。

總結(jié)

以上所述是小編給大家介紹的JS中的兩種數(shù)據(jù)類型及實(shí)現(xiàn)引用類型的深拷貝的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論