js深拷貝與淺拷貝

2022-09-03 22:30:21 字數 1444 閱讀 3284

1 基礎知識:基本型別與引用型別

js中可以把變數分成兩部分,基本型別和引用型別。

基本型別包括:undefined、null、boolean、number和string;

引用型別值可能由多個值構成的物件。

在對基礎型別資料進行拷貝時,實際相當於建立新的相同資料'hello',賦值給b

var a='hello';

var b =a;

b = 'world';

console.log(a);

//"hello"

在對引用型別資料進行拷貝時,操作的不是實際的物件而是物件的引用,通過指標指向相同的記憶體區域,所以值相等;

在下面的**中,因為arr和arr1指向同一記憶體區域,所以當改變arr1的值時,arr也跟著改變了

var arr = ['1','2'];

var arr1 =arr;

arr1[0] = '11';

console.log(arr);

//["11", "2"]

2 淺拷貝

當我們在對引用型別資料進行拷貝時,就會產生類似上面子物件資料改變引起父物件資料同時改變的情況,這種拷貝就叫淺拷貝。

function

shallowcopy(src) ;

for (var prop in

src)

return

dst;

}var xiaoming = ;

var xiaoli =shallowcopy(xiaoming);

//如果將拷貝後的物件xiaoli的愛好更改,原物件xiaoming就也被更改了

//因為xiaoli的hobby屬性是個陣列,即引用型別的資料,所以複製到的內容只是乙個記憶體位址,並不是建立的新內容,詳情請參考js的基本型別和引用型別

xiaoli.hobby[0] = '畫畫';

console.log(xiaoming);

// 小明的內容也別改變了

3深拷貝

實現深拷貝的方法就是將淺拷貝遞迴,讓每一次賦值都通過基礎型別的建立新資料的賦值方式進行賦值

function

deepcopy(src,dst);

for (var i in

src) ;

deepcopy(src[i],dst[i]);

}else

} return

dst;

}var xiaoming2 = ;

var xiaoli2 =deepcopy(xiaoming2);

xiaoli2.hobby[0] = '畫畫';

console.log(xiaoming2);

// xiaoming的內容不變

js深拷貝與淺拷貝

1 基礎知識 基本型別與引用型別 js中可以把變數分成兩部分,基本型別和引用型別。基本型別包括 undefined null boolean number和string 引用型別值可能由多個值構成的物件。在對基礎型別資料進行拷貝時,實際相當於建立新的相同資料 hello 賦值給b var a hel...

js 淺拷貝與深拷貝

js 有兩種資料型別,基礎資料型別和引用資料型別 基礎資料型別都是按值訪問的,我們可以直接操作儲存在變數中的實際的值。而引用型別如array,1.淺拷貝 只複製指向某個物件的指標,而不複製物件本身,新舊物件共享一塊記憶體 淺拷貝是指只複製一層物件,當物件的屬性是引用型別時,實質複製的是其引用,當引用...

js深拷貝與淺拷貝

實現乙個頁面或者乙個功能時,常常遇到的場景需要我們備份乙個陣列或者物件,這時候出現了深拷貝與淺拷貝效果截然不同呀總結如下 var arr 1,2,3,4 shallowarr arr arr 0 change console.log arr console.log shallowarr change...