首頁  >  文章  >  web前端  >  javascript深拷貝和淺拷貝的差別是什麼

javascript深拷貝和淺拷貝的差別是什麼

WBOY
WBOY原創
2022-03-10 11:24:206737瀏覽

在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學習教學

以上是javascript深拷貝和淺拷貝的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn