javascript深拷貝和淺拷貝的區(qū)別有哪些

這篇文章主要介紹“javascript深拷貝和淺拷貝的區(qū)別有哪些”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“javascript深拷貝和淺拷貝的區(qū)別有哪些”文章能幫助大家解決問題。

在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ū)別是什么

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

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

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

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

2、引用類型：Object、Array、Date、Function等；引用類型的值是對(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ù)類型的簡單數(shù)組，對(duì)于第一級(jí)數(shù)組元素是對(duì)象或者數(shù)組等引用類型變量的數(shù)組來說，上述方法都將失效。

關(guān)于“javascript深拷貝和淺拷貝的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。