面試篇---1 如何區分深拷貝與淺拷貝
如何區分深拷貝與淺拷貝?
簡單來說,就是假設B複製了A,當修改A時,看B是否會發生變化,如果B也跟著變了,說明這是淺拷貝,拿人手短,如果B沒變,那就是深拷貝,自食其力。
淺拷貝例子:
var a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b);
嗯?明明b複製了a,為啥修改陣列a,陣列b也跟著變了,這裡我不禁陷入了沉思。
那麼這裡,就得引入基本資料型別與引用資料型別的概念了。
面試常問,基本資料型別有哪些,number,string,boolean,null,undefined五類。
引用資料型別(Object類)有常規名值對的無序物件{a:1},陣列[1,2,3],以及函式等。
而這兩類資料儲存分別是這樣的:
a.基本型別--名和值儲存在棧記憶體中,例如let a=1;
當你b=a複製時,棧記憶體會新開闢一個記憶體,例如這樣:
所以當你此時修改a=2,對b並不會造成影響,因為此時的b已自食其力,翅膀硬了,不受a的影響了。雖然b不受a影響, 但這也算不上深拷貝,因為深拷貝本身只針對較為複雜的object型別資料。
b.引用資料型別--名存在棧記憶體中,值存在於堆記憶體中,但是棧記憶體會提供一個引用的地址指向堆記憶體中的值,我們以上面淺拷貝的例子畫個圖:
當b=a進行拷貝時,其實複製的是a的引用地址,而並非堆裡面的值。
而當我們a[0]=1時進行陣列修改時,由於a與b指向的是同一個地址,所以自然b也受了影響,這就是所謂的淺拷貝了。
那,要是在堆記憶體中也開闢一個新的記憶體專門為b存放值,就像基本型別那樣,豈不就達到深拷貝的效果了.
那麼如何實現深拷貝呢?
1、我們可以借用JSON物件的parse和stringify
function deepClone(obj){ var _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone } var a=[0,1,[2,3],4], b=deepClone(a); a[0]=1; a[2][0]=1; console.log(a,b);
現在b完全不受a的影響了。
2、借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷貝,為true為深拷貝,為false,則為淺拷貝
target Object型別 目標物件,其他物件的成員屬性將被附加到該物件上。
object1 objectN可選。 Object型別 第一個以及第N個被合併的物件。
let a=[0,1,[2,3],4], b=$.extend(true,[],a); a[0]=1; a[2][0]=1; console.log(a,b);
。
其實深拷貝也不僅僅是為了應付面試題, 在實際開發中也是非常有用的。 例如後臺返回了一堆資料,你需要對這堆資料做操作,
但多人開發情況下,你是沒辦法明確這堆資料是否有其它功能也需要使用, 直接修改可能會造成隱性問題,深拷貝能幫你更安全安心的去操作資料,
根據實際情況來使用深拷貝,大概就是這個意思。