js 物件深拷貝 js淺拷貝及深拷貝的幾種方法

2021-10-12 05:31:43 字數 1792 閱讀 8059

乙個專案開發中經常會用到需要複製乙個物件或者陣列,但是卻不能改變原始物件,所以就要用到拷貝,拷貝又分深拷貝和淺拷貝,今天列舉一下幾種拷貝形式。

object.assign我們經常會用到合併物件,當然利用object.assign性質我們也可以實現物件的拷貝。

var obj1 = 

var obj2 = object.assign({}, obj1)

obj2.a = 4

console.log(obj1, obj2)

結果如圖:

這裡要注意的是object.assign第乙個引數必須是個空物件

var obj1 = 

var obj2 =

obj2.a = 4

console.log(obj1, obj2)

結果如圖:

這裡一樣可以實現之前上面的結果。

但這兩種拷貝有乙個問題就是只能賦值一層,假設我們有如下資料結構

var obj1 = 

var obj2 = [...obj1]

obj2[0].childs =

console.log(obj1, obj2)

我們會發現列印出的結果如下:

上圖可看出obj1,obj2 的結果均變了,這並不是我們想要的結果,所以我們要用到深拷貝。

var obj1 = 

var obj2 = json.parse(json.stringify(obj1))

obj2[0].childs =

console.log(obj1, obj2)

結果如下:

這樣的話就能達到我們想要的結果。

這種方法簡單,但也有弊端,看看下面的資料結構:

var obj1 = [,

age: undefined

}]var obj2 = json.parse(json.stringify(obj1))

obj2[0].childs =

console.log(obj1, obj2)

結果:

我們從結果中發現,值為undefined,或者function的時候並不會拷貝過來。

var obj1 = [,

age: undefined

}]var obj2 = extend(obj1)

obj2[0].childs =

console.log(obj1, obj2)

function extend(data)

for(let i in data)

return val

} else

}

結果:

這樣我們就能把所有值都拷貝過來。

js 物件深拷貝 深拷貝與淺拷貝

前言 最近在複習一些面試的知識點,剛剛好複習到了這一部分,於是就寫下這篇文章記錄一下。一 值型別和引用型別 在學習深拷貝和淺拷貝之前,我們先來了解一下js的變數型別。值型別 vs 引用型別 值型別 值型別主要有 number,string,boolean,symbol,null,undefined ...

js淺拷貝深拷貝

js淺拷貝深拷貝 對於想要複製的物件,如果物件裡面對應的值都是基本資料型別的,可以直接複製 也就是通過淺拷貝複製。如果對應的值有物件那麼淺拷貝是行不通的。會造成資料汙染。下面介紹淺拷貝與深拷貝實現方法。1.淺拷貝 let tem let copy for let key in tem 2.通過obj...

淺拷貝,深拷貝 js

堆和棧 基本型別 存放在棧中的簡單資料段,資料大小確定,記憶體空間大小可以分配。6種基本資料型別 undefined null boolean number和string,es6新增屬性symbol.他們是直接按值存放的,所以可以直接訪問。引用型別 存放在堆記憶體中的物件,變數實際儲存的是乙個指標,...