javascript深拷貝和淺拷貝的區別有哪些

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

在JavaScript中，淺拷貝只是復制了原數據的內存地址，相當于兩個數據指針指向了相同的地址，任意一個數據元素發生改變，會影響另一個；而深拷貝的兩個數據指向了不同的地址，任意一個元素發生改變，不會影響另一個。

本教程操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript深拷貝和淺拷貝的區別是什么

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

堆和棧都是內存中劃分出來用于存儲的區域。棧（stack）為自動分配的內存空間，它由系統自動釋放；堆（heap）則是動態分配的內存，大小不定也不會自動釋放。

接著看下基本數據類型 & 引用數據類型（又稱復雜數據類型）

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

2、引用類型：Object、Array、Date、Function等；引用類型的值是對象，保存在堆內存中。

深淺拷貝的概念

注：深淺拷貝的區別只適用于Array與Object這樣的復雜對象。

1、淺拷貝：只是復制了原數據的內存地址，相當于兩個數據指針指向了相同的地址，其中任一數據元素發生改變，會影響另一個。

2、深拷貝：兩個數據指向了不同的地址，數據元素發生改變時不會相互影響。

實例探究

1、淺拷貝

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

運行結果：arr數組元素隨arrB數組元素的改變而改變

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

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

深拷貝數組

①. 直接遍歷

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中數組元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

運行結果：arrB數組元素改變并未影響arr數組元素的值

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

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

運行結果：arr數組元素未隨arrB數組元素的改變而改變

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

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

運行結果：數組中元素改變并不會相互影響

以上三種方法只針對于數組元素是基本數據類型的簡單數組，對于第一級數組元素是對象或者數組等引用類型變量的數組來說，上述方法都將失效。

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