Object.assign() {...obj} JSON.Parse 等幾種拷貝的區別

let obj = {

age: 10

}

let obj1 = {

grade: 1,

name: {

first: 'bob'

}

}

let objS = obj1

let objA = Object.assign(obj, obj1)

let objJ = JSON.parse(JSON.stringify(obj1))

let objK = { ...obj1 }

console.log(objA)

console.log(objJ)

console.log(objK)

obj1.grade = 9

obj1.name.first = 'chris'

console.log(objS)

console.log(objA)

console.log(objJ)

console.log(objK)

 

 

打印結果:

{ age: 10, grade: 1, name: { first: 'bob' } }

{ grade: 1, name: { first: 'bob' } }

{ grade: 1, name: { first: 'bob' } }

{ grade: 9, name: { first: 'chris' } }

{ age: 10, grade: 1, name: { first: 'chris' } }

{ grade: 1, name: { first: 'bob' } }

{ grade: 1, name: { first: 'chris' } }

結論: 因爲對象建立在堆上 棧上的變量保存其地址 因此也叫指針變量

淺拷貝 如let simpleObj = obj;

則只拷貝了 obj在棧上的指針變量給 simpleObj 也就是說simpleObj實際存儲的值是 obj的對象的內存地址 指向與 obj一樣的堆內存地址 因此改變 obj的值 simpleObj 的值也會改變

深拷貝 就是copy了一份對象 放在另外一塊堆內存地址  改變以前的對象 對這個複製的對象不會有任何影響

js裏有幾種深拷貝方式

Object.assign() 不算深拷貝 也不算淺拷貝 一級拷貝 若是內層還有引用類型 就是淺拷貝了

... 擴展和 assign 同樣

JSON.parse(JSON.Stringify()) 深拷貝 可是缺點是不能拷貝 constructor 方法 解決辦法就是遞歸