js——關於對象的深淺拷貝(淺拷貝Object.assign和深拷貝_.cloneDeep(obj)

 1.對象的拷貝分爲兩種,第一種爲淺拷貝

let str = '張三'
let str1 = str
str1 = '李四'
console.log(str1, str)

let obj = {
  name: '張三'
}
let obj1 = obj
obj1.name = obj.name
console.log(obj.name, obj1.name)
obj1.name = '李四'
console.log(obj.name, obj1.name)

這時候我們發現了個問題，當我們修改obj1對象裏面的內容的時候obj裏面的內容也隨之改變了

造成這個問題的原因在現代js教程中有所解釋

就是說,如果上方那樣複製並不是創建了個新的對象，而是兩個對象共同引入一個地址，所以兩個對象纔可以修改一個值

很顯然，我們並不想要這種效果,於是乎我們可以通過幾種方法來解決這個問題

方法一:

let obj = {
  name: '張三'
}
let obj1 = {}
obj1.name = obj.name
console.log(obj.name, obj1.name)
obj1.name = '李四'
console.log(obj.name, obj1.name)

這裏我們直接將obj1賦值爲空,這個時候obj1相當於聲明瞭一個新的地址,然後再把obj中的name賦值給obj1就不會造成上面的bug了 

方法二:

let obj = {
  name: '張三'
}
let obj1 = JSON.parse(JSON.stringify(obj))
obj1.name = obj.name
console.log(obj.name, obj1.name)
obj1.name = '李四'
console.log(obj.name, obj1.name)

現在介紹以下Object.assgin方法

此方法用於對象過多並且想合併到一起去成爲一個對象的時候使用

let obj = {
  name: '張三'
}
let obj2 = {
  age: 2
}
let obj1 = {}
Object.assign(obj1, obj, obj2)
console.log(obj1)

這樣就將obj和obj2合併到obj1中了

接下來介紹深拷貝

let obj = {
  name: '張三',
  size: {
    name: '李四'
  }
}
 
let obj1 = {}
obj1.size = obj.size
obj1.size.name = '張三'
console.log(obj, obj1)

我們發現即使我們令定義obj1爲空值然後再給他賦值obj.size，之後再去改變obj1.size的時候obj.size也會隨之改變。這個時候我們就要用到深拷貝了

方法一: _.cloneDeep(obj)

需要引用lodash.min.js

方法二:使用JSON進行深拷貝