javascript中拷貝

hedzr 發(fā)布于2019-08-21 17:24 / 2005人閱讀

摘要：簡單來說，就是把復(fù)制過程中的源對象都記錄下來，以及對應(yīng)的拷貝對象，碰到屬性值是之前復(fù)制過的對象的情況，的屬性值是，就把對應(yīng)的拷貝對象給它，，而不進(jìn)行遞歸深拷貝。例如的屬性值是的地址，那么拷貝過程中，的屬性值就是的地址。

基礎(chǔ)類型與引用(地址) 例子一

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123
}
let obj1 = obj
console.log(obj1) // { c: "l am an obj", d: 123 }
obj1.c = "l am an obj1"
console.log(obj) // { c: "l am an obj1", d: 123 }
console.log(obj1) // { c: "l am an obj1", d: 123 }

變量obj存的是地址address01，執(zhí)行let obj1 = obj后，變量obj1存的還是address01。就好像主臥室(obj)，或大房間(obj1)，都指的是房間號為address01的房間。所以，你說“換掉大房間的床”，obj1.c = "l am an obj1"，等同于“換掉主臥室的床”，因為都是“換掉房間號為address01的房間里的床”。

例子二

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123
}
let obj1 = {}
obj1.c = obj.c
obj1.d = obj.d
console.log(obj1) // { c: "l am an obj", d: 123 }
obj1.c = "l am an obj1"
console.log(obj) // { c: "l am an obj", d: 123 }
console.log(obj1) // { c: "l am an obj1", d: 123 }

變量obj存的是地址address01，執(zhí)行let obj1 = {}后，變量obj1得到了一個新的地址address02?，F(xiàn)在不僅有房間號為address01的主臥室(obj)，還有房間號為address02的次臥(obj1)，在那里你可以布置你自己的新房間。你可以先說“要一張和主臥一樣的床”，obj1.c = obj.c，再說“還要一臺和主臥一樣的燈”，obj1.d = obj.d，最后你又覺得床不舒服，“換了張床”，obj1.c = "l am an obj1"，但這些都不會影響主臥的床obj.c。

例子三

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123,
  e: [1, 3, 5]
}
let obj1 = {}
obj1.c = obj.c
obj1.d = obj.d
obj1.e = obj.e
console.log(obj1) // { c: "l am an obj", d: 123, e: [ 1, 3, 5 ] }
obj1.c = "l am an obj1"
obj1.e[0] = 2
console.log(obj) // { c: "l am an obj", d: 123, e: [ 2, 3, 5 ] }
console.log(obj1) // { c: "l am an obj1", d: 123, e: [ 2, 3, 5 ] }

主臥里面還可以有衛(wèi)生間obj.e的呢，obj.e存的也是地址adress03，只要是對象或數(shù)組都存的是地址。這時obj1.e = obj.e，存的就是主臥的衛(wèi)生間的房間號address03。目前只有一個衛(wèi)生間，你知道衛(wèi)生間的地址adress03，保存在obj1.e中，然后你就知道如何“把衛(wèi)生間的熱水器換掉”，obj1.e[0] = 2。

例子四

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123,
  e: [1, 3, 5]
}
let obj1 = {}
obj1.c = obj.c
obj1.d = obj.d
obj1.e = obj.e
console.log(obj1) // { c: "l am an obj", d: 123, e: [ 1, 3, 5 ] }
obj1.c = "l am an obj1"
obj1.e = "l am not an arr"
console.log(obj) // { c: "l am an obj", d: 123, e: [ 1, 3, 5 ] }
console.log(obj1) // { c: "l am an obj1", d: 123, e: "l am not an arr" }

后來你覺得知道主臥的衛(wèi)生間的地址adress03有什么用，有那閑工夫還不如用來放個柜子，故obj1.e = "l am not an arr"，這樣做以后，沒有了衛(wèi)生間的地址，你就不能在主臥的衛(wèi)生間里搗亂了。

例子五

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123,
  e: [1, 3, 5]
}
let obj1 = {}
obj1.c = obj.c
obj1.d = obj.d
obj1.e = []
for (let i = 0; i < obj.e.length; i++) {
  obj1.e[i] = obj.e[i]
}
console.log(obj1) // { c: "l am an obj", d: 123, e: [ 1, 3, 5 ] }
obj1.c = "l am an obj1"
obj1.e[0] = 2
console.log(obj) // { c: "l am an obj", d: 123, e: [ 1, 3, 5 ] }
console.log(obj1) // { c: "l am an obj1", d: 123, e: [ 2, 3, 5 ] }

其實你還是想要個獨立衛(wèi)生間的，obj1.e = []，這樣你得到了房間號為adress04的房間，然后你按照主臥衛(wèi)生間的樣子來改造這個房間for (let i = 0; i < obj.e.length; i++) { obj1.e[i] = obj.e[i] }。這時候有兩個獨立的衛(wèi)生間了，房間號分別是adress04和adress03，盡管布局裝飾一樣，但還是兩個房間，賓館里的房間還都一樣呢，但它們有不同的房間號，實際上是相互獨立的房間。你換adress04房間的熱水器，obj1.e[0] = 2，并不會影響房間adress03房間。

抽象例子五的復(fù)制過程

即深拷貝

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123,
  e: [1, 3, 5]
}
function deepCopy(val) {
  if (!val || typeof val !== "object") {
    return val
  }
  let copy = Array.isArray(val) ? [] : {}
  for (key in val) {
    if (val.hasOwnProperty(key)) {
      if (val[key] && typeof val[key] === "object") {
        copy[key] = deepCopy(val[key])
      } else {
        copy[key] = val[key]
      }
    }
  }
  return copy
}

let obj1 = deepCopy(obj)
obj1.c = "l am an obj1"
obj1.e[0] = 2
console.log(obj) // { c: "l am an obj", d: 123, e: [ 1, 3, 5 ] }
console.log(obj1) // { c: "l am an obj1", d: 123, e: [ 2, 3, 5 ] }

例子六

let a = "l am a string"
let b = 6
let obj = {
  c: "l am an obj",
  d: 123,
  e: {}
}
obj.e.parent = obj

let keyValArr = []
let copyArr = []

function deepCopy(val) {
  if (!val || typeof val !== "object") {
    return val
  }
  let copy = Array.isArray(val) ? [] : {}

  let index = keyValArr.indexOf(val)
  if (index === -1) {
    keyValArr.push(val)
    copyArr.push(copy)
  } else {
    return copyArr[index]
  }

  for (key in val) {
    if (val.hasOwnProperty(key)) {
      if (val[key] && typeof val[key] === "object") {
        copy[key] = deepCopy(val[key])
      } else {
        copy[key] = val[key]
      }
    }
  }
  return copy
}

let obj1 = deepCopy(obj)
obj1.e.parent.c = "l am an obj1"
console.log(obj) // { c: "l am an obj", d: 123, e: { parent: [Circular] } }
console.log(obj1) // { c: "l am an obj1", d: 123, e: { parent: [Circular] } }

總有人想尋根問祖，obj.e.parent = obj，如此形成了環(huán)，之前的代碼就要重新調(diào)整。簡單來說，就是把復(fù)制過程中的源對象[obj, obj.e]都記錄下來，以及對應(yīng)的拷貝對象[copy, copy.e]，碰到屬性值是之前復(fù)制過的對象的情況，obj.e.parent的屬性值是obj，就把對應(yīng)的拷貝對象給它，copy.e.parent = copy，而不進(jìn)行遞歸深拷貝。
從地址的角度來說，復(fù)制過程中，把地址都記錄下來，用valArr記錄源對象的地址[address01, address03]，用copyArr記錄拷貝對象的地址[address02, address04]，當(dāng)碰到需要拷貝的是之前記錄過源對象的地址時，就把對應(yīng)的拷貝對象的地址返回。例如obj.e.parent的屬性值是obj的地址，那么拷貝過程中，obj1.e.parent的屬性值就是obj1的地址。