在JavaScript中，淺拷貝只是復(fù)制了原數(shù)據(jù)的內(nèi)存地址，相當(dāng)于兩個(gè)數(shù)據(jù)指針指向了相同的地址，任意一個(gè)數(shù)據(jù)元素發(fā)生改變，會(huì)影響另一個(gè)；而深拷貝的兩個(gè)數(shù)據(jù)指向了不同的地址，任意一個(gè)元素發(fā)生改變，不會(huì)影響另一個(gè)。

本教程操作環(huán)境：windows10系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript深拷貝和淺拷貝的區(qū)別是什么

在探究淺拷貝和深拷貝之前，先來(lái)了解下堆和棧的概念

堆和棧都是內(nèi)存中劃分出來(lái)用于存儲(chǔ)的區(qū)域。棧（stack）為自動(dòng)分配的內(nèi)存空間，它由系統(tǒng)自動(dòng)釋放；堆（heap）則是動(dòng)態(tài)分配的內(nèi)存，大小不定也不會(huì)自動(dòng)釋放。

接著看下基本數(shù)據(jù)類(lèi)型 & 引用數(shù)據(jù)類(lèi)型（又稱(chēng)復(fù)雜數(shù)據(jù)類(lèi)型）

1、基本類(lèi)型：String、Number、Boolean、null、undefined、Symbol（ES6新增，表示獨(dú)一無(wú)二的值）；基本類(lèi)型值在內(nèi)存中占固定大小，保存在棧內(nèi)存中。

2、引用類(lèi)型：Object、Array、Date、Function等；引用類(lèi)型的值是對(duì)象，保存在堆內(nèi)存中。

深淺拷貝的概念

注：深淺拷貝的區(qū)別只適用于Array與Object這樣的復(fù)雜對(duì)象。

1、淺拷貝：只是復(fù)制了原數(shù)據(jù)的內(nèi)存地址，相當(dāng)于兩個(gè)數(shù)據(jù)指針指向了相同的地址，其中任一數(shù)據(jù)元素發(fā)生改變，會(huì)影響另一個(gè)。

2、深拷貝：兩個(gè)數(shù)據(jù)指向了不同的地址，數(shù)據(jù)元素發(fā)生改變時(shí)不會(huì)相互影響。

實(shí)例探究

1、淺拷貝

var arr = [0, 1, 2]; var arrB;   //把a(bǔ)rr賦值給arrB arrB = arr; console.log("arr:", arr); console.log("arrB:", arrB); console.log("-----------改變arrB中數(shù)組元素的值后-----------"); arrB[0] = 5; console.log("arr:", arr); console.log("arrB:", arrB);

運(yùn)行結(jié)果：arr數(shù)組元素隨arrB數(shù)組元素的改變而改變

2、深拷貝（只做第一層深拷貝）

注：在使用深拷貝的時(shí)候，一定要弄清楚對(duì)深拷貝的要求程度，是僅深拷貝第一層級(jí)的對(duì)象屬性或者數(shù)組元素，還是遞歸拷貝所有層級(jí)的對(duì)象屬性和數(shù)組元素？

深拷貝數(shù)組

①. 直接遍歷

var arr = [1, 2, 3, 4]; function copy(arr){     var newArr = [];     for(var i=0;i<arr.length;i++){         newArr.push(arr[i]);     }     return newArr; }   var arrB = copy(arr); console.log("arrB:", arrB); console.log("-----------改變arrB中數(shù)組元素的值后-----------"); arrB[0] = 5; console.log("arr:", arr); console.log("arrB:", arrB);

運(yùn)行結(jié)果：arrB數(shù)組元素改變并未影響arr數(shù)組元素的值

②. concat()：用于連接兩個(gè)或多個(gè)數(shù)組。該方法不會(huì)改變現(xiàn)有數(shù)組，僅僅只會(huì)返回被連接數(shù)組的一個(gè)副本。

var arr = [0, 1, 2]; var arrB;   //把a(bǔ)rr賦值給arrB arrB = arr.concat(); console.log("arr:", arr); console.log("arrB:", arrB); console.log("-----------改變arrB中數(shù)組元素的值后-----------"); arrB[0] = 5; console.log("arr:", arr); console.log("arrB:", arrB);

運(yùn)行結(jié)果：arr數(shù)組元素未隨arrB數(shù)組元素的改變而改變

③. slice()：該方法返回一個(gè)從已有的數(shù)組中截取一部分元素片段組成新的數(shù)組（不改變?cè)瓟?shù)組）。

var arr = [0, 1, 2, 4, 5]; var arrB;   //把a(bǔ)rr賦值給arrB arrB = arr.slice(); console.log("arr:", arr); console.log("arrB:", arrB); console.log("-----------改變arrB中數(shù)組元素的值后-----------"); arrB[0] = 10; arr[4] = 8; console.log("arr:", arr); console.log("arrB:", arrB);

運(yùn)行結(jié)果：數(shù)組中元素改變并不會(huì)相互影響

以上三種方法只針對(duì)于數(shù)組元素是基本數(shù)據(jù)類(lèi)型的簡(jiǎn)單數(shù)組，對(duì)于第一級(jí)數(shù)組元素是對(duì)象或者數(shù)組等引用類(lèi)型變量的數(shù)組來(lái)說(shuō)，上述方法都將失效。