javascript中拷貝

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

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

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

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)，都指的是房間號(hào)為address01的房間。所以，你說(shuō)“換掉大房間的床”，obj1.c = "l am an obj1"，等同于“換掉主臥室的床”，因?yàn)槎际恰皳Q掉房間號(hào)為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得到了一個(gè)新的地址address02。現(xiàn)在不僅有房間號(hào)為address01的主臥室(obj)，還有房間號(hào)為address02的次臥(obj1)，在那里你可以布置你自己的新房間。你可以先說(shuō)“要一張和主臥一樣的床”，obj1.c = obj.c，再說(shuō)“還要一臺(tái)和主臥一樣的燈”，obj1.d = obj.d，最后你又覺(jué)得床不舒服，“換了張床”，obj1.c = "l am an obj1"，但這些都不會(huì)影響主臥的床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，只要是對(duì)象或數(shù)組都存的是地址。這時(shí)obj1.e = obj.e，存的就是主臥的衛(wèi)生間的房間號(hào)address03。目前只有一個(gè)衛(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" }

后來(lái)你覺(jué)得知道主臥的衛(wèi)生間的地址adress03有什么用，有那閑工夫還不如用來(lái)放個(gè)柜子，故obj1.e = "l am not an arr"，這樣做以后，沒(méi)有了衛(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 ] }

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

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

即深拷貝

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] } }

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